From f126dd261d14225d1758150fef454b1463a8abc1 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Tue, 14 Jul 2026 09:27:29 -0400
Subject: [PATCH 1/4] feat(ui): Brand known OAuth clients on the consent screen

When an OAuth app has no uploaded logo, the consent screen now renders a
recognizable brand mark for known clients (Claude, ChatGPT). Matching is
keyed on the trusted, backend-resolved redirect domain, not the
app-owner-set name, so a look-alike name cannot borrow the branding.
---
 .changeset/oauth-consent-known-clients.md     |  5 +++
 .../src/components/OAuthConsent/LogoGroup.tsx | 16 +++++--
 .../components/OAuthConsent/OAuthConsent.tsx  | 16 ++++++-
 .../__tests__/OAuthConsent.test.tsx           | 23 ++++++++++
 .../__tests__/knownClients.test.ts            | 39 +++++++++++++++++
 .../components/OAuthConsent/knownClients.ts   | 43 +++++++++++++++++++
 packages/ui/src/icons/claude.svg              |  3 ++
 packages/ui/src/icons/index.ts                |  2 +
 packages/ui/src/icons/openai.svg              |  3 ++
 9 files changed, 145 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/oauth-consent-known-clients.md
 create mode 100644 packages/ui/src/components/OAuthConsent/__tests__/knownClients.test.ts
 create mode 100644 packages/ui/src/components/OAuthConsent/knownClients.ts
 create mode 100644 packages/ui/src/icons/claude.svg
 create mode 100644 packages/ui/src/icons/openai.svg

diff --git a/.changeset/oauth-consent-known-clients.md b/.changeset/oauth-consent-known-clients.md
new file mode 100644
index 00000000000..c0f596bfa45
--- /dev/null
+++ b/.changeset/oauth-consent-known-clients.md
@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+The OAuth consent screen now shows a recognizable brand mark for well-known OAuth clients (Claude, ChatGPT) when the requesting application has not uploaded its own logo. Recognition is based on the request's registrable redirect domain, so a look-alike application name cannot borrow the branding.
diff --git a/packages/ui/src/components/OAuthConsent/LogoGroup.tsx b/packages/ui/src/components/OAuthConsent/LogoGroup.tsx
index 09292f3f7c3..0431799b962 100644
--- a/packages/ui/src/components/OAuthConsent/LogoGroup.tsx
+++ b/packages/ui/src/components/OAuthConsent/LogoGroup.tsx
@@ -35,7 +35,17 @@ export function LogoGroupItem({ children, sx, ...props }: ComponentProps<typeof
   );
 }
 
-export function LogoGroupIcon({ size = 'md', sx }: { size?: 'sm' | 'md'; sx?: ThemableCssProp }) {
+export function LogoGroupIcon({
+  size = 'md',
+  sx,
+  icon = LockDottedCircle,
+  iconSx = t => ({ color: t.colors.$primary500 }),
+}: {
+  size?: 'sm' | 'md';
+  sx?: ThemableCssProp;
+  icon?: React.ComponentType;
+  iconSx?: ThemableCssProp;
+}) {
   const scale: ThemableCssProp = t => {
     const value = size === 'sm' ? t.space.$6 : t.space.$12;
     return { width: value, height: value };
@@ -63,8 +73,8 @@ export function LogoGroupIcon({ size = 'md', sx }: { size?: 'sm' | 'md'; sx?: Th
       elementDescriptor={descriptors.logoGroupIcon}
     >
       <Icon
-        icon={LockDottedCircle}
-        sx={t => ({ color: t.colors.$primary500 })}
+        icon={icon}
+        sx={iconSx}
       />
     </Box>
   );
diff --git a/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx b/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx
index 15a8be991d5..1b25534ac2e 100644
--- a/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx
+++ b/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx
@@ -13,6 +13,7 @@ import { Alert, Textarea } from '@/ui/primitives';
 import { Route, Switch } from '@/ui/router';
 
 import { InlineAction } from './InlineAction';
+import { getKnownOAuthClient } from './knownClients';
 import {
   ListGroup,
   ListGroupContent,
@@ -90,6 +91,11 @@ function _OAuthConsent() {
   const domainAction = data?.redirectDomain ?? getRedirectDisplay(redirectUrl);
   const viewFullUrlText = t(localizationKeys('oauthConsent.viewFullUrl'));
 
+  // When the OAuth app has no uploaded logo, fall back to a recognized client's
+  // brand mark (Claude, ChatGPT, ...). Keyed on the trusted redirect domain, not
+  // the app-owner-set name, so a look-alike name cannot borrow the branding.
+  const knownClient = oauthApplicationLogoUrl ? undefined : getKnownOAuthClient(domainAction);
+
   // Error states only apply to the public flow.
   if (!hasContextCallbacks) {
     const errorMessage = !oauthClientId
@@ -197,7 +203,10 @@ function _OAuthConsent() {
               {!oauthApplicationLogoUrl && logoImageUrl && (
                 <LogoGroup>
                   <LogoGroupItem justify='end'>
-                    <LogoGroupIcon />
+                    <LogoGroupIcon
+                      icon={knownClient?.icon}
+                      iconSx={knownClient?.iconSx}
+                    />
                   </LogoGroupItem>
                   <LogoGroupSeparator />
                   <LogoGroupItem justify='start'>
@@ -208,7 +217,10 @@ function _OAuthConsent() {
               {/* no avatars */}
               {!oauthApplicationLogoUrl && !logoImageUrl && (
                 <LogoGroup>
-                  <LogoGroupIcon />
+                  <LogoGroupIcon
+                    icon={knownClient?.icon}
+                    iconSx={knownClient?.iconSx}
+                  />
                 </LogoGroup>
               )}
               <Header.Title localizationKey={oauthApplicationName} />
diff --git a/packages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.test.tsx b/packages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.test.tsx
index 893b1344f2f..7e477e9f998 100644
--- a/packages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.test.tsx
+++ b/packages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.test.tsx
@@ -542,4 +542,27 @@ describe('OAuthConsent', () => {
       });
     });
   });
+
+  it('renders the branded logo badge for a recognized client with no uploaded logo', async () => {
+    const { wrapper, fixtures, props } = await createFixtures(f => {
+      f.withUser({ email_addresses: ['jane@example.com'] });
+    });
+
+    props.setProps({ componentName: 'OAuthConsent' } as any);
+    mockOAuthApplication(fixtures.clerk, {
+      getConsentInfo: vi.fn().mockResolvedValue({
+        ...fakeConsentInfo,
+        oauthApplicationName: 'Claude',
+        oauthApplicationLogoUrl: '',
+        redirectDomain: 'claude.ai',
+      }),
+    });
+
+    const { getByText, baseElement } = render(<OAuthConsent />, { wrapper });
+
+    await waitFor(() => {
+      expect(getByText('Claude')).toBeVisible();
+      expect(baseElement.querySelector('.cl-logoGroupIcon')).not.toBeNull();
+    });
+  });
 });
diff --git a/packages/ui/src/components/OAuthConsent/__tests__/knownClients.test.ts b/packages/ui/src/components/OAuthConsent/__tests__/knownClients.test.ts
new file mode 100644
index 00000000000..7dbe643f3e7
--- /dev/null
+++ b/packages/ui/src/components/OAuthConsent/__tests__/knownClients.test.ts
@@ -0,0 +1,39 @@
+import { describe, expect, it } from 'vitest';
+
+import { getKnownOAuthClient } from '../knownClients';
+
+describe('getKnownOAuthClient', () => {
+  it('resolves Claude from its registrable domains', () => {
+    expect(getKnownOAuthClient('claude.ai')?.name).toBe('Claude');
+    expect(getKnownOAuthClient('claude.com')?.name).toBe('Claude');
+    expect(getKnownOAuthClient('anthropic.com')?.name).toBe('Claude');
+  });
+
+  it('resolves ChatGPT from its registrable domains', () => {
+    expect(getKnownOAuthClient('chatgpt.com')?.name).toBe('ChatGPT');
+    expect(getKnownOAuthClient('openai.com')?.name).toBe('ChatGPT');
+  });
+
+  it('is case-insensitive and trims surrounding whitespace', () => {
+    expect(getKnownOAuthClient('  Claude.AI  ')?.name).toBe('Claude');
+  });
+
+  it('returns undefined for empty, nullish, or unknown domains', () => {
+    expect(getKnownOAuthClient('')).toBeUndefined();
+    expect(getKnownOAuthClient(null)).toBeUndefined();
+    expect(getKnownOAuthClient(undefined)).toBeUndefined();
+    expect(getKnownOAuthClient('example.com')).toBeUndefined();
+  });
+
+  it('does not match a subdomain string that is not the registrable domain', () => {
+    // Matching is exact on the PSL-resolved registrable domain, so a look-alike
+    // host must not borrow the branding.
+    expect(getKnownOAuthClient('claude.ai.evil.com')).toBeUndefined();
+    expect(getKnownOAuthClient('notclaude.ai')).toBeUndefined();
+  });
+
+  it('provides an icon component for matched clients', () => {
+    expect(getKnownOAuthClient('claude.ai')?.icon).toBeDefined();
+    expect(getKnownOAuthClient('chatgpt.com')?.icon).toBeDefined();
+  });
+});
diff --git a/packages/ui/src/components/OAuthConsent/knownClients.ts b/packages/ui/src/components/OAuthConsent/knownClients.ts
new file mode 100644
index 00000000000..787808be540
--- /dev/null
+++ b/packages/ui/src/components/OAuthConsent/knownClients.ts
@@ -0,0 +1,43 @@
+import type React from 'react';
+
+import { Claude, OpenAI } from '@/ui/icons';
+import type { ThemableCssProp } from '@/ui/styledSystem';
+
+/**
+ * A curated OAuth client we can recognize and brand on the consent screen.
+ * Matching is keyed on the registrable redirect domain (the trusted,
+ * backend-resolved signal), never on the app-owner-set name or homepage.
+ */
+type KnownOAuthClient = {
+  name: string;
+  icon: React.ComponentType;
+  /**
+   * Overrides the default badge icon tint. Omit for icons that carry their own
+   * fill (e.g. a fixed brand color).
+   */
+  iconSx?: ThemableCssProp;
+  /** Registrable domains (PSL-resolved) that identify this client. */
+  domains: string[];
+};
+
+const KNOWN_OAUTH_CLIENTS: KnownOAuthClient[] = [
+  { name: 'Claude', icon: Claude, domains: ['claude.ai', 'claude.com', 'anthropic.com'] },
+  {
+    name: 'ChatGPT',
+    icon: OpenAI,
+    iconSx: t => ({ color: t.colors.$colorForeground }),
+    domains: ['chatgpt.com', 'openai.com'],
+  },
+];
+
+/**
+ * Resolves a known OAuth client from its registrable redirect domain, or
+ * `undefined` when the domain is empty or unrecognized.
+ */
+export function getKnownOAuthClient(domain?: string | null): KnownOAuthClient | undefined {
+  if (!domain) {
+    return undefined;
+  }
+  const normalized = domain.trim().toLowerCase();
+  return KNOWN_OAUTH_CLIENTS.find(client => client.domains.includes(normalized));
+}
diff --git a/packages/ui/src/icons/claude.svg b/packages/ui/src/icons/claude.svg
new file mode 100644
index 00000000000..786fa29d08b
--- /dev/null
+++ b/packages/ui/src/icons/claude.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill="#D97757" d="m4.7144 15.9555 4.7174-2.6471.079-.2307-.079-.1275h-.2307l-.7893-.0486-2.6956-.0729-2.3375-.0971-2.2646-.1214-.5707-.1215-.5343-.7042.0546-.3522.4797-.3218.686.0608 1.5179.1032 2.2767.1578 1.6514.0972 2.4468.255h.3886l.0546-.1579-.1336-.0971-.1032-.0972L6.973 9.8356l-2.55-1.6879-1.3356-.9714-.7225-.4918-.3643-.4614-.1578-1.0078.6557-.7225.8803.0607.2246.0607.8925.686 1.9064 1.4754 2.4893 1.8336.3643.3035.1457-.1032.0182-.0728-.164-.2733-1.3539-2.4467-1.445-2.4893-.6435-1.032-.17-.6194c-.0607-.255-.1032-.4674-.1032-.7285L6.287.1335 6.6997 0l.9957.1336.419.3642.6192 1.4147 1.0018 2.2282 1.5543 3.0296.4553.8985.2429.8318.091.255h.1579v-.1457l.1275-1.706.2368-2.0947.2307-2.6957.0789-.7589.3764-.9107.7468-.4918.5828.2793.4797.686-.0668.4433-.2853 1.8517-.5586 2.9021-.3643 1.9429h.2125l.2429-.2429.9835-1.3053 1.6514-2.0643.7286-.8196.85-.9046.5464-.4311h1.0321l.759 1.1293-.34 1.1657-1.0625 1.3478-.8804 1.1414-1.2628 1.7-.7893 1.36.0729.1093.1882-.0183 2.8535-.607 1.5421-.2794 1.8396-.3157.8318.3886.091.3946-.3278.8075-1.967.4857-2.3072.4614-3.4364.8136-.0425.0304.0486.0607 1.5482.1457.6618.0364h1.621l3.0175.2247.7892.522.4736.6376-.079.4857-1.2142.6193-1.6393-.3886-3.825-.9107-1.3113-.3279h-.1822v.1093l1.0929 1.0686 2.0035 1.8092 2.5075 2.3314.1275.5768-.3218.4554-.34-.0486-2.2039-1.6575-.85-.7468-1.9246-1.621h-.1275v.17l.4432.6496 2.3436 3.5214.1214 1.0807-.17.3521-.6071.2125-.6679-.1214-1.3721-1.9246L14.38 17.959l-1.1414-1.9428-.1397.079-.674 7.2552-.3156.3703-.7286.2793-.6071-.4614-.3218-.7468.3218-1.4753.3886-1.9246.3157-1.53.2853-1.9004.17-.6314-.0121-.0425-.1397.0182-1.4328 1.9672-2.1796 2.9446-1.7243 1.8456-.4128.164-.7164-.3704.0667-.6618.4008-.5889 2.386-3.0357 1.4389-1.882.929-1.0868-.0062-.1579h-.0546l-6.3385 4.1164-1.1293.1457-.4857-.4554.0608-.7467.2307-.2429 1.9064-1.3114Z"/>
+</svg>
diff --git a/packages/ui/src/icons/index.ts b/packages/ui/src/icons/index.ts
index bbd9306f598..4dcc2fc7d10 100644
--- a/packages/ui/src/icons/index.ts
+++ b/packages/ui/src/icons/index.ts
@@ -20,6 +20,7 @@ export { default as Building } from './building.svg';
 export { default as Caret } from './caret.svg';
 export { default as Checkmark } from './checkmark.svg';
 export { default as CheckmarkCircle } from './checkmark-circle.svg';
+export { default as Claude } from './claude.svg';
 export { default as ChevronDown } from './chevron-down.svg';
 export { default as ChevronLeft } from './chevron-left.svg';
 export { default as ChevronRight } from './chevron-right.svg';
@@ -53,6 +54,7 @@ export { default as MagnifyingGlass } from './magnifying-glass.svg';
 export { default as Menu } from './menu.svg';
 export { default as Minus } from './minus.svg';
 export { default as Mobile } from './mobile.svg';
+export { default as OpenAI } from './openai.svg';
 export { default as Pen } from './pen.svg';
 export { default as Plus } from './plus.svg';
 export { default as Print } from './print.svg';
diff --git a/packages/ui/src/icons/openai.svg b/packages/ui/src/icons/openai.svg
new file mode 100644
index 00000000000..747e3342e82
--- /dev/null
+++ b/packages/ui/src/icons/openai.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="180 180 356 356" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill="currentColor" d="M508.749 317.399C516.777 287.314 508.991 253.884 485.389 230.282C461.788 206.681 428.36 198.895 398.273 206.923C376.231 184.928 343.39 174.956 311.148 183.596C278.906 192.234 255.45 217.292 247.36 247.361C217.291 255.451 192.233 278.91 183.595 311.149C174.957 343.391 184.927 376.232 206.924 398.274C198.896 428.359 206.683 461.789 230.284 485.391C253.885 508.992 287.313 516.779 317.401 508.75C339.442 530.745 372.286 540.717 404.525 532.079C436.767 523.441 460.223 498.384 468.313 468.315C498.383 460.224 523.44 436.766 532.078 404.526C540.716 372.285 530.747 339.443 508.749 317.402V317.399ZM470.899 244.776C486.892 260.77 493.488 282.601 490.687 303.412L415.577 260.046C412.411 258.218 408.509 258.218 405.345 260.046L317.401 310.82V277.526C317.401 275.191 318.652 273.005 320.676 271.837L387.644 233.174C414.178 218.353 448.346 222.223 470.901 244.776H470.899ZM357.837 311.144L398.275 334.491V381.185L357.837 404.532L317.398 381.185V334.491L357.837 311.144ZM264.776 269.693C265.207 239.305 285.644 211.649 316.453 203.393C338.3 197.54 360.505 202.744 377.127 215.573L302.014 258.937C298.848 260.764 296.898 264.144 296.898 267.798V369.346L268.065 352.699C266.043 351.531 264.776 349.353 264.776 347.017V269.691V269.693ZM203.391 316.454C209.244 294.608 224.854 277.978 244.276 269.999V356.73C244.276 360.384 246.226 363.763 249.392 365.591L337.337 416.365L308.503 433.013C306.481 434.181 303.961 434.188 301.939 433.02L234.971 394.357C208.868 378.789 195.138 347.261 203.391 316.454ZM244.775 470.9C228.781 454.906 222.186 433.075 224.986 412.264L300.096 455.63C303.263 457.457 307.164 457.457 310.328 455.63L398.273 404.856V438.149C398.273 440.485 397.022 442.671 394.997 443.839L328.029 482.502C301.495 497.322 267.327 493.452 244.772 470.9H244.775ZM450.897 445.982C450.466 476.371 430.029 504.027 399.22 512.283C377.373 518.136 355.168 512.932 338.547 500.102L413.659 456.738C416.826 454.911 418.775 451.532 418.775 447.877V346.329L447.609 362.977C449.631 364.145 450.897 366.323 450.897 368.659V445.985V445.982ZM512.282 399.221C506.429 421.068 490.819 437.697 471.397 445.676V358.946C471.397 355.292 469.448 351.912 466.281 350.085L378.336 299.311L407.17 282.663C409.192 281.495 411.712 281.487 413.734 282.655L480.702 321.318C506.805 336.887 520.536 368.415 512.282 399.221Z"/>
+</svg>

From a3c090a5749a1602e06df5c2be28fb345e4acc1b Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Tue, 14 Jul 2026 10:47:39 -0400
Subject: [PATCH 2/4] fix(ui): Keep OAuth brand marks out of the shared
 ui-common chunk

The Claude/ChatGPT brand SVGs lived in src/icons, which the ui-common
rspack cacheGroup captures, pushing the shared chunk over its bundlewatch
budget. Move them into the OAuthConsent component directory so they bundle
into the lazy oauthConsent chunk instead, and bump that chunk's budget to
account for the marks.
---
 packages/ui/bundlewatch.config.json                   |  2 +-
 packages/ui/src/components/OAuthConsent/brandIcons.ts | 11 +++++++++++
 .../src/{icons => components/OAuthConsent}/claude.svg |  0
 .../ui/src/components/OAuthConsent/knownClients.ts    |  3 ++-
 .../src/{icons => components/OAuthConsent}/openai.svg |  0
 packages/ui/src/icons/index.ts                        |  2 --
 6 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 packages/ui/src/components/OAuthConsent/brandIcons.ts
 rename packages/ui/src/{icons => components/OAuthConsent}/claude.svg (100%)
 rename packages/ui/src/{icons => components/OAuthConsent}/openai.svg (100%)

diff --git a/packages/ui/bundlewatch.config.json b/packages/ui/bundlewatch.config.json
index 08f942932d0..eff0191c9c9 100644
--- a/packages/ui/bundlewatch.config.json
+++ b/packages/ui/bundlewatch.config.json
@@ -26,7 +26,7 @@
     { "path": "./dist/planDetails*.js", "maxSize": "5.5KB" },
     { "path": "./dist/subscriptionDetails*.js", "maxSize": "7KB" },
     { "path": "./dist/apiKeys*.js", "maxSize": "6KB" },
-    { "path": "./dist/oauthConsent*.js", "maxSize": "6KB" },
+    { "path": "./dist/oauthConsent*.js", "maxSize": "7.5KB" },
     { "path": "./dist/up-billing-page*.js", "maxSize": "3KB" },
     { "path": "./dist/op-billing-page*.js", "maxSize": "3KB" },
     { "path": "./dist/up-plans-page*.js", "maxSize": "2.5KB" },
diff --git a/packages/ui/src/components/OAuthConsent/brandIcons.ts b/packages/ui/src/components/OAuthConsent/brandIcons.ts
new file mode 100644
index 00000000000..80730c02b83
--- /dev/null
+++ b/packages/ui/src/components/OAuthConsent/brandIcons.ts
@@ -0,0 +1,11 @@
+// @ts-nocheck
+/**
+ * Brand marks for recognized OAuth clients. These live in the component
+ * directory (not `src/icons`) on purpose: the `ui-common` rspack cacheGroup
+ * captures everything outside `/components`, so keeping them here bundles the
+ * marks into the lazy `oauthConsent` chunk instead of the shared chunk that
+ * loads on every component. The `@ts-nocheck` mirrors `icons/index.ts`: `.svg`
+ * modules are resolved by the bundler (svgr), not by tsc.
+ */
+export { default as Claude } from './claude.svg';
+export { default as OpenAI } from './openai.svg';
diff --git a/packages/ui/src/icons/claude.svg b/packages/ui/src/components/OAuthConsent/claude.svg
similarity index 100%
rename from packages/ui/src/icons/claude.svg
rename to packages/ui/src/components/OAuthConsent/claude.svg
diff --git a/packages/ui/src/components/OAuthConsent/knownClients.ts b/packages/ui/src/components/OAuthConsent/knownClients.ts
index 787808be540..ebb18858578 100644
--- a/packages/ui/src/components/OAuthConsent/knownClients.ts
+++ b/packages/ui/src/components/OAuthConsent/knownClients.ts
@@ -1,8 +1,9 @@
 import type React from 'react';
 
-import { Claude, OpenAI } from '@/ui/icons';
 import type { ThemableCssProp } from '@/ui/styledSystem';
 
+import { Claude, OpenAI } from './brandIcons';
+
 /**
  * A curated OAuth client we can recognize and brand on the consent screen.
  * Matching is keyed on the registrable redirect domain (the trusted,
diff --git a/packages/ui/src/icons/openai.svg b/packages/ui/src/components/OAuthConsent/openai.svg
similarity index 100%
rename from packages/ui/src/icons/openai.svg
rename to packages/ui/src/components/OAuthConsent/openai.svg
diff --git a/packages/ui/src/icons/index.ts b/packages/ui/src/icons/index.ts
index 4dcc2fc7d10..bbd9306f598 100644
--- a/packages/ui/src/icons/index.ts
+++ b/packages/ui/src/icons/index.ts
@@ -20,7 +20,6 @@ export { default as Building } from './building.svg';
 export { default as Caret } from './caret.svg';
 export { default as Checkmark } from './checkmark.svg';
 export { default as CheckmarkCircle } from './checkmark-circle.svg';
-export { default as Claude } from './claude.svg';
 export { default as ChevronDown } from './chevron-down.svg';
 export { default as ChevronLeft } from './chevron-left.svg';
 export { default as ChevronRight } from './chevron-right.svg';
@@ -54,7 +53,6 @@ export { default as MagnifyingGlass } from './magnifying-glass.svg';
 export { default as Menu } from './menu.svg';
 export { default as Minus } from './minus.svg';
 export { default as Mobile } from './mobile.svg';
-export { default as OpenAI } from './openai.svg';
 export { default as Pen } from './pen.svg';
 export { default as Plus } from './plus.svg';
 export { default as Print } from './print.svg';

From f45f80066e2028e724a894d767bddc36a12e733c Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Tue, 21 Jul 2026 13:22:58 -0400
Subject: [PATCH 3/4] feat(ui): Unify OAuth consent logo container and label
 brand marks

Consolidate the consent-screen logo chrome into a single LogoGroupItemContainer
that sizes either an app logo or an icon from one size prop, add the
logoGroupItemContainer appearance element, and expose an accessible name on
recognized-client brand marks (decorative fallback stays aria-hidden).
---
 .changeset/oauth-consent-known-clients.md     |  2 +-
 .../src/components/OAuthConsent/LogoGroup.tsx | 47 +++++++++----
 .../components/OAuthConsent/OAuthConsent.tsx  | 70 ++++++++++++-------
 .../__tests__/OAuthConsent.test.tsx           |  6 +-
 .../src/customizables/elementDescriptors.ts   |  1 +
 packages/ui/src/internal/appearance.ts        |  1 +
 packages/ui/src/primitives/Icon.tsx           |  5 ++
 7 files changed, 91 insertions(+), 41 deletions(-)

diff --git a/.changeset/oauth-consent-known-clients.md b/.changeset/oauth-consent-known-clients.md
index c0f596bfa45..7da474cf6fb 100644
--- a/.changeset/oauth-consent-known-clients.md
+++ b/.changeset/oauth-consent-known-clients.md
@@ -2,4 +2,4 @@
 '@clerk/ui': patch
 ---
 
-The OAuth consent screen now shows a recognizable brand mark for well-known OAuth clients (Claude, ChatGPT) when the requesting application has not uploaded its own logo. Recognition is based on the request's registrable redirect domain, so a look-alike application name cannot borrow the branding.
+The OAuth consent screen now shows a recognizable brand mark for well-known OAuth clients (Claude, ChatGPT) when the requesting application has not uploaded its own logo. Recognition is based on the request's registrable redirect domain, so a look-alike application name cannot borrow the branding. The brand mark exposes an accessible name for assistive technologies, and the logo badges are now customizable through the new `logoGroupItemContainer` appearance element.
diff --git a/packages/ui/src/components/OAuthConsent/LogoGroup.tsx b/packages/ui/src/components/OAuthConsent/LogoGroup.tsx
index 0431799b962..446a7b3b2b9 100644
--- a/packages/ui/src/components/OAuthConsent/LogoGroup.tsx
+++ b/packages/ui/src/components/OAuthConsent/LogoGroup.tsx
@@ -35,20 +35,21 @@ export function LogoGroupItem({ children, sx, ...props }: ComponentProps<typeof
   );
 }
 
-export function LogoGroupIcon({
+export function LogoGroupItemContainer({
   size = 'md',
   sx,
-  icon = LockDottedCircle,
-  iconSx = t => ({ color: t.colors.$primary500 }),
+  children,
 }: {
   size?: 'sm' | 'md';
   sx?: ThemableCssProp;
-  icon?: React.ComponentType;
-  iconSx?: ThemableCssProp;
+  children: React.ReactNode;
 }) {
   const scale: ThemableCssProp = t => {
-    const value = size === 'sm' ? t.space.$6 : t.space.$12;
-    return { width: value, height: value };
+    const container = size === 'sm' ? t.space.$6 : t.space.$12;
+    const inner = size === 'sm' ? t.space.$3 : t.space.$5;
+    // `&&` doubles the container's specificity so it wins over a bare child
+    // (Icon / ApplicationLogo) that sizes itself with a single class.
+    return { width: container, height: container, '&& > *': { width: inner, height: inner } };
   };
 
   return (
@@ -70,16 +71,38 @@ export function LogoGroupIcon({
         scale,
         sx,
       ]}
-      elementDescriptor={descriptors.logoGroupIcon}
+      elementDescriptor={descriptors.logoGroupItemContainer}
     >
-      <Icon
-        icon={icon}
-        sx={iconSx}
-      />
+      {children}
     </Box>
   );
 }
 
+export function LogoGroupIcon({
+  icon = LockDottedCircle,
+  iconSx = t => ({ color: t.colors.$primary500 }),
+  label,
+}: {
+  icon?: React.ComponentType;
+  iconSx?: ThemableCssProp;
+  /**
+   * Accessible name for a meaningful mark (e.g. a recognized client's brand).
+   * Omit for the decorative fallback, which is then hidden from assistive tech.
+   */
+  label?: string;
+}) {
+  return (
+    <Icon
+      icon={icon}
+      sx={iconSx}
+      elementDescriptor={descriptors.logoGroupIcon}
+      role={label ? 'img' : undefined}
+      aria-label={label}
+      aria-hidden={label ? undefined : true}
+    />
+  );
+}
+
 export function LogoGroupSeparator() {
   return (
     <Box
diff --git a/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx b/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx
index 1b25534ac2e..dd403253117 100644
--- a/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx
+++ b/packages/ui/src/components/OAuthConsent/OAuthConsent.tsx
@@ -22,7 +22,7 @@ import {
   ListGroupItem,
   ListGroupItemLabel,
 } from './ListGroup';
-import { LogoGroup, LogoGroupIcon, LogoGroupItem, LogoGroupSeparator } from './LogoGroup';
+import { LogoGroup, LogoGroupIcon, LogoGroupItem, LogoGroupItemContainer, LogoGroupSeparator } from './LogoGroup';
 import { OrgSelect } from './OrgSelect';
 import { getForwardedParams, getOAuthConsentFromSearch, getRedirectDisplay, getRedirectUriFromSearch } from './utils';
 
@@ -165,16 +165,20 @@ function _OAuthConsent() {
               {oauthApplicationLogoUrl && logoImageUrl && (
                 <LogoGroup>
                   <LogoGroupItem justify='end'>
-                    <ApplicationLogo
-                      src={oauthApplicationLogoUrl}
-                      alt={oauthApplicationName}
-                      href={oauthApplicationUrl}
-                      isExternal
-                    />
+                    <LogoGroupItemContainer>
+                      <ApplicationLogo
+                        src={oauthApplicationLogoUrl}
+                        alt={oauthApplicationName}
+                        href={oauthApplicationUrl}
+                        isExternal
+                      />
+                    </LogoGroupItemContainer>
                   </LogoGroupItem>
                   <LogoGroupSeparator />
                   <LogoGroupItem justify='start'>
-                    <ApplicationLogo />
+                    <LogoGroupItemContainer>
+                      <ApplicationLogo />
+                    </LogoGroupItemContainer>
                   </LogoGroupItem>
                 </LogoGroup>
               )}
@@ -182,20 +186,24 @@ function _OAuthConsent() {
               {oauthApplicationLogoUrl && !logoImageUrl && (
                 <LogoGroup>
                   <Box sx={{ position: 'relative' }}>
-                    <ApplicationLogo
-                      src={oauthApplicationLogoUrl}
-                      alt={oauthApplicationName}
-                      href={oauthApplicationUrl}
-                      isExternal
-                    />
-                    <LogoGroupIcon
+                    <LogoGroupItemContainer>
+                      <ApplicationLogo
+                        src={oauthApplicationLogoUrl}
+                        alt={oauthApplicationName}
+                        href={oauthApplicationUrl}
+                        isExternal
+                      />
+                    </LogoGroupItemContainer>
+                    <LogoGroupItemContainer
                       size='sm'
                       sx={t => ({
                         position: 'absolute',
-                        bottom: `calc(${t.space.$3} * -1)`,
-                        insetInlineEnd: `calc(${t.space.$3} * -1)`,
+                        bottom: `calc(${t.space.$2x5} * -1)`,
+                        insetInlineEnd: `calc(${t.space.$2x5} * -1)`,
                       })}
-                    />
+                    >
+                      <LogoGroupIcon />
+                    </LogoGroupItemContainer>
                   </Box>
                 </LogoGroup>
               )}
@@ -203,24 +211,32 @@ function _OAuthConsent() {
               {!oauthApplicationLogoUrl && logoImageUrl && (
                 <LogoGroup>
                   <LogoGroupItem justify='end'>
-                    <LogoGroupIcon
-                      icon={knownClient?.icon}
-                      iconSx={knownClient?.iconSx}
-                    />
+                    <LogoGroupItemContainer>
+                      <LogoGroupIcon
+                        icon={knownClient?.icon}
+                        iconSx={knownClient?.iconSx}
+                        label={knownClient?.name}
+                      />
+                    </LogoGroupItemContainer>
                   </LogoGroupItem>
                   <LogoGroupSeparator />
                   <LogoGroupItem justify='start'>
-                    <ApplicationLogo />
+                    <LogoGroupItemContainer>
+                      <ApplicationLogo />
+                    </LogoGroupItemContainer>
                   </LogoGroupItem>
                 </LogoGroup>
               )}
               {/* no avatars */}
               {!oauthApplicationLogoUrl && !logoImageUrl && (
                 <LogoGroup>
-                  <LogoGroupIcon
-                    icon={knownClient?.icon}
-                    iconSx={knownClient?.iconSx}
-                  />
+                  <LogoGroupItemContainer>
+                    <LogoGroupIcon
+                      icon={knownClient?.icon}
+                      iconSx={knownClient?.iconSx}
+                      label={knownClient?.name}
+                    />
+                  </LogoGroupItemContainer>
                 </LogoGroup>
               )}
               <Header.Title localizationKey={oauthApplicationName} />
diff --git a/packages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.test.tsx b/packages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.test.tsx
index 7e477e9f998..fc401643835 100644
--- a/packages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.test.tsx
+++ b/packages/ui/src/components/OAuthConsent/__tests__/OAuthConsent.test.tsx
@@ -562,7 +562,11 @@ describe('OAuthConsent', () => {
 
     await waitFor(() => {
       expect(getByText('Claude')).toBeVisible();
-      expect(baseElement.querySelector('.cl-logoGroupIcon')).not.toBeNull();
+      const icon = baseElement.querySelector('.cl-logoGroupIcon');
+      expect(icon).not.toBeNull();
+      // The brand mark conveys which app is requesting access, so it needs an accessible name.
+      expect(icon).toHaveAttribute('role', 'img');
+      expect(icon).toHaveAttribute('aria-label', 'Claude');
     });
   });
 });
diff --git a/packages/ui/src/customizables/elementDescriptors.ts b/packages/ui/src/customizables/elementDescriptors.ts
index 0e8f3dc9d92..abe2260ba9f 100644
--- a/packages/ui/src/customizables/elementDescriptors.ts
+++ b/packages/ui/src/customizables/elementDescriptors.ts
@@ -55,6 +55,7 @@ export const APPEARANCE_KEYS = containsAllElementsConfigKeys([
 
   'logoGroup',
   'logoGroupItem',
+  'logoGroupItemContainer',
   'logoGroupIcon',
   'logoGroupSeparator',
 
diff --git a/packages/ui/src/internal/appearance.ts b/packages/ui/src/internal/appearance.ts
index bb64ee12425..82010ace01b 100644
--- a/packages/ui/src/internal/appearance.ts
+++ b/packages/ui/src/internal/appearance.ts
@@ -183,6 +183,7 @@ export type ElementsConfig = {
 
   logoGroup: WithOptions;
   logoGroupItem: WithOptions;
+  logoGroupItemContainer: WithOptions;
   logoGroupIcon: WithOptions;
   logoGroupSeparator: WithOptions;
 
diff --git a/packages/ui/src/primitives/Icon.tsx b/packages/ui/src/primitives/Icon.tsx
index 42a29334628..0e0d04c396f 100644
--- a/packages/ui/src/primitives/Icon.tsx
+++ b/packages/ui/src/primitives/Icon.tsx
@@ -29,6 +29,11 @@ const { applyVariants, filterProps } = createVariants(theme => ({
 // @ts-ignore
 export type IconProps = StyleVariants<typeof applyVariants> & {
   icon: React.ComponentType;
+  // Icon renders an <svg>; allow the accessibility attributes an svg accepts so a
+  // meaningful icon can carry a name (decorative ones stay aria-hidden).
+  role?: React.AriaRole;
+  'aria-label'?: string;
+  'aria-hidden'?: boolean;
 };
 
 export const Icon = (props: IconProps): JSX.Element => {

From 905095235cc43d3f25d29bc031abb09ec77cb03a Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Tue, 21 Jul 2026 15:07:10 -0400
Subject: [PATCH 4/4] Apply suggestion from @alexcarpenter

---
 .changeset/oauth-consent-known-clients.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/oauth-consent-known-clients.md b/.changeset/oauth-consent-known-clients.md
index 7da474cf6fb..200a84478c3 100644
--- a/.changeset/oauth-consent-known-clients.md
+++ b/.changeset/oauth-consent-known-clients.md
@@ -2,4 +2,4 @@
 '@clerk/ui': patch
 ---
 
-The OAuth consent screen now shows a recognizable brand mark for well-known OAuth clients (Claude, ChatGPT) when the requesting application has not uploaded its own logo. Recognition is based on the request's registrable redirect domain, so a look-alike application name cannot borrow the branding. The brand mark exposes an accessible name for assistive technologies, and the logo badges are now customizable through the new `logoGroupItemContainer` appearance element.
+The OAuth consent screen now shows a recognizable brand mark for well-known OAuth clients (Claude, ChatGPT) when the requesting application has not uploaded its own logo.