From e5c6c80e03937c7894792983d1ca8eb65e03c970 Mon Sep 17 00:00:00 2001
From: Vorflux AI <249966464+vorflux[bot]@users.noreply.github.com>
Date: Sat, 8 Aug 2026 00:31:59 +0000
Subject: [PATCH] refactor(web): share Gmail icon asset

---
 apps/web/components/brain-connector-icons.tsx | 36 ++-----------------
 apps/web/components/brain-home/widgets.tsx    | 36 ++-----------------
 .../onboarding-brain/step-sources.tsx         | 35 ++----------------
 packages/ui/assets/icons.tsx                  | 30 ++++++++++++++++
 4 files changed, 36 insertions(+), 101 deletions(-)

diff --git a/apps/web/components/brain-connector-icons.tsx b/apps/web/components/brain-connector-icons.tsx
index 30d7a3bc..b93ed41a 100644
--- a/apps/web/components/brain-connector-icons.tsx
+++ b/apps/web/components/brain-connector-icons.tsx
@@ -1,5 +1,5 @@
 import { cn } from "@lib/utils"
-import { Granola, Notion } from "@ui/assets/icons"
+import { Gmail, Granola, Notion } from "@ui/assets/icons"
 import { dmSans125ClassName } from "@/lib/fonts"
 
 export function SlackMark({ className }: { className?: string }) {
@@ -51,38 +51,6 @@ function GithubMark({ className }: { className?: string }) {
 	)
 }
 
-function GmailMark({ className }: { className?: string }) {
-	return (
-		<svg
-			className={className}
-			viewBox="0 0 256 193"
-			xmlns="http://www.w3.org/2000/svg"
-			aria-hidden="true"
-		>
-			<path
-				d="M58.182 192.05V93.14L27.507 65.077 0 49.504v125.091c0 9.658 7.825 17.455 17.455 17.455z"
-				fill="#4285F4"
-			/>
-			<path
-				d="M197.818 192.05h40.727c9.659 0 17.455-7.826 17.455-17.455V49.505l-31.156 17.837-27.026 25.798z"
-				fill="#34A853"
-			/>
-			<path
-				d="m58.182 93.14-4.174-38.647 4.174-36.989L128 69.868l69.818-52.364 4.668 33.95-4.668 41.685L128 145.504z"
-				fill="#EA4335"
-			/>
-			<path
-				d="M197.818 17.504V93.14L256 49.504V26.231c0-21.585-24.64-33.89-41.89-20.945z"
-				fill="#FBBC04"
-			/>
-			<path
-				d="m0 49.504 26.759 20.07L58.182 93.14V17.504L41.89 5.286C24.61-7.66 0 4.646 0 26.23z"
-				fill="#C5221F"
-			/>
-		</svg>
-	)
-}
-
 function LinearMark({ className }: { className?: string }) {
 	return (
 		<svg viewBox="0 0 24 24" fill="currentColor" className={className}>
@@ -132,7 +100,7 @@ export function brainConnectorIcon(
 ): React.ReactNode {
 	switch (slug) {
 		case "gmail":
-			return <GmailMark className={className} />
+			return <Gmail className={className} />
 		case "github":
 			return <GithubMark className={cn(className, "text-[#FAFAFA]")} />
 		case "linear":
diff --git a/apps/web/components/brain-home/widgets.tsx b/apps/web/components/brain-home/widgets.tsx
index 69ff83f3..e4299b37 100644
--- a/apps/web/components/brain-home/widgets.tsx
+++ b/apps/web/components/brain-home/widgets.tsx
@@ -2,7 +2,7 @@
 
 import { cn } from "@lib/utils"
 import { dmSans125ClassName } from "@/lib/fonts"
-import { GoogleDrive, Notion } from "@ui/assets/icons"
+import { Gmail, GoogleDrive, Notion } from "@ui/assets/icons"
 import {
 	AlertCircle,
 	ArrowRight,
@@ -34,38 +34,6 @@ import {
 	type Stat,
 } from "./data"
 
-function GmailIcon({ className }: { className?: string }) {
-	return (
-		<svg
-			className={className}
-			viewBox="0 0 256 193"
-			xmlns="http://www.w3.org/2000/svg"
-			aria-hidden="true"
-		>
-			<path
-				d="M58.182 192.05V93.14L27.507 65.077 0 49.504v125.091c0 9.658 7.825 17.455 17.455 17.455z"
-				fill="#4285F4"
-			/>
-			<path
-				d="M197.818 192.05h40.727c9.659 0 17.455-7.826 17.455-17.455V49.505l-31.156 17.837-27.026 25.798z"
-				fill="#34A853"
-			/>
-			<path
-				d="m58.182 93.14-4.174-38.647 4.174-36.989L128 69.868l69.818-52.364 4.668 33.95-4.668 41.685L128 145.504z"
-				fill="#EA4335"
-			/>
-			<path
-				d="M197.818 17.504V93.14L256 49.504V26.231c0-21.585-24.64-33.89-41.89-20.945z"
-				fill="#FBBC04"
-			/>
-			<path
-				d="m0 49.504 26.759 20.07L58.182 93.14V17.504L41.89 5.286C24.61-7.66 0 4.646 0 26.23z"
-				fill="#C5221F"
-			/>
-		</svg>
-	)
-}
-
 export const modalCardStyle = {
 	boxShadow:
 		"0 2.842px 14.211px 0 rgba(0, 0, 0, 0.25), 0.711px 0.711px 0.711px 0 rgba(255, 255, 255, 0.10) inset",
@@ -495,7 +463,7 @@ export function Quotation({ children }: { children: React.ReactNode }) {
 function connectedSourceIcon(key: ConnectedSource["iconKey"]) {
 	if (key === "drive") return <GoogleDrive className="size-4" />
 	if (key === "notion") return <Notion className="size-4" />
-	if (key === "gmail") return <GmailIcon className="size-4" />
+	if (key === "gmail") return <Gmail className="size-4" />
 	if (key === "github") return <Github className="size-4 text-[#fafafa]" />
 	return <FileText className="size-4 text-[#8B8B8B]" />
 }
diff --git a/apps/web/components/onboarding-brain/step-sources.tsx b/apps/web/components/onboarding-brain/step-sources.tsx
index 65cec780..358597e6 100644
--- a/apps/web/components/onboarding-brain/step-sources.tsx
+++ b/apps/web/components/onboarding-brain/step-sources.tsx
@@ -6,7 +6,7 @@ import { useQueryState } from "nuqs"
 import Image from "next/image"
 import { Button } from "@ui/components/button"
 import { Dialog, DialogClose, DialogContent } from "@ui/components/dialog"
-import { GoogleDrive, Granola, Notion, OneDrive } from "@ui/assets/icons"
+import { Gmail, GoogleDrive, Granola, Notion, OneDrive } from "@ui/assets/icons"
 import {
 	Select,
 	SelectContent,
@@ -61,37 +61,6 @@ function GrokIcon({ className }: { className?: string }) {
 	)
 }
 
-function GmailIcon({ className }: { className?: string }) {
-	return (
-		<svg
-			className={className}
-			viewBox="0 0 256 193"
-			xmlns="http://www.w3.org/2000/svg"
-			aria-hidden="true"
-		>
-			<path
-				d="M58.182 192.05V93.14L27.507 65.077 0 49.504v125.091c0 9.658 7.825 17.455 17.455 17.455z"
-				fill="#4285F4"
-			/>
-			<path
-				d="M197.818 192.05h40.727c9.659 0 17.455-7.826 17.455-17.455V49.505l-31.156 17.837-27.026 25.798z"
-				fill="#34A853"
-			/>
-			<path
-				d="m58.182 93.14-4.174-38.647 4.174-36.989L128 69.868l69.818-52.364 4.668 33.95-4.668 41.685L128 145.504z"
-				fill="#EA4335"
-			/>
-			<path
-				d="M197.818 17.504V93.14L256 49.504V26.231c0-21.585-24.64-33.89-41.89-20.945z"
-				fill="#FBBC04"
-			/>
-			<path
-				d="m0 49.504 26.759 20.07L58.182 93.14V17.504L41.89 5.286C24.61-7.66 0 4.646 0 26.23z"
-				fill="#C5221F"
-			/>
-		</svg>
-	)
-}
 import { cn } from "@lib/utils"
 import {
 	PLAN_DISPLAY_NAMES,
@@ -1198,7 +1167,7 @@ function MoreSourcesGrid({
 			<SourceCard
 				title="Gmail"
 				blurb="Inbox threads, decisions, customer conversations."
-				icon={<GmailIcon className="size-6" />}
+				icon={<Gmail className="size-6" />}
 				state={values.connected.gmail ?? "idle"}
 				ctaLabel="Connect"
 				locked={isLocked("max")}
diff --git a/packages/ui/assets/icons.tsx b/packages/ui/assets/icons.tsx
index 0b7b7d6f..7aaece87 100644
--- a/packages/ui/assets/icons.tsx
+++ b/packages/ui/assets/icons.tsx
@@ -58,6 +58,36 @@ export const GoogleDrive = ({ className }: { className?: string }) => (
 	</svg>
 )
 
+export const Gmail = ({ className }: { className?: string }) => (
+	<svg
+		className={className}
+		viewBox="0 0 256 193"
+		xmlns="http://www.w3.org/2000/svg"
+		aria-hidden="true"
+	>
+		<path
+			d="M58.182 192.05V93.14L27.507 65.077 0 49.504v125.091c0 9.658 7.825 17.455 17.455 17.455z"
+			fill="#4285F4"
+		/>
+		<path
+			d="M197.818 192.05h40.727c9.659 0 17.455-7.826 17.455-17.455V49.505l-31.156 17.837-27.026 25.798z"
+			fill="#34A853"
+		/>
+		<path
+			d="m58.182 93.14-4.174-38.647 4.174-36.989L128 69.868l69.818-52.364 4.668 33.95-4.668 41.685L128 145.504z"
+			fill="#EA4335"
+		/>
+		<path
+			d="M197.818 17.504V93.14L256 49.504V26.231c0-21.585-24.64-33.89-41.89-20.945z"
+			fill="#FBBC04"
+		/>
+		<path
+			d="m0 49.504 26.759 20.07L58.182 93.14V17.504L41.89 5.286C24.61-7.66 0 4.646 0 26.23z"
+			fill="#C5221F"
+		/>
+	</svg>
+)
+
 export const Notion = ({ className }: { className?: string }) => (
 	<svg
 		className={className}