diff --git a/apps/og-generator/app/api/og/route.tsx b/apps/og-generator/app/api/og/route.tsx
index d6a2eb5c1a8..a2910686ed6 100644
--- a/apps/og-generator/app/api/og/route.tsx
+++ b/apps/og-generator/app/api/og/route.tsx
@@ -31,6 +31,9 @@ const EYEBROW_PILL_WEIGHT = 500 as const
const WORDMARK_HEIGHT_1X = 43
// Per-tile icon size for logo-grid's row of partner-logo tiles (1x design px).
const LOGO_TILE_ICON_SIZE_1X = 64
+// icon-layout arrangement 0's own icon glyph size (bigger than the shared
+// LOGO_TILE_ICON_SIZE_1X, to fill its larger 244.07px chip).
+const GRID_ARRANGEMENT_ICON_GLYPH_SIZE_1X = 120
/** Scale (naturalW, naturalH) to fit within a boxSize square, preserving aspect ratio. */
function fitBox(naturalW: number, naturalH: number, boxSize: number): { width: number; height: number } {
@@ -413,6 +416,25 @@ export async function GET(req: Request) {
/>
) : null
+ // icon-layout arrangement 0: same icon, rendered at its own larger glyph
+ // size instead of LOGO_TILE_ICON_SIZE_1X's shared 64px.
+ const gridArrangementIconEl =
+ iconObj && iconObj.url ? (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ ) : iconObj ? (
+ // eslint-disable-next-line @next/next/no-img-element
+
+ ) : null
+
const logoHeight = WORDMARK_HEIGHT_1X * s
const logoEl = (
// eslint-disable-next-line @next/next/no-img-element
@@ -476,6 +498,7 @@ export async function GET(req: Request) {
halfThumbLogoEl,
iconEl,
boxedIconEl,
+ gridArrangementIconEl,
hasIcon,
showBrandLogo,
eyebrowBlockHeight,
diff --git a/apps/og-generator/lib/design/templates.tsx b/apps/og-generator/lib/design/templates.tsx
index 99177e8318e..2ce0f584a5b 100644
--- a/apps/og-generator/lib/design/templates.tsx
+++ b/apps/og-generator/lib/design/templates.tsx
@@ -35,11 +35,13 @@ export interface TemplateParts {
halfThumbLogoEl?: ReactNode | null
/** Single icon pre-sized to `ICON_TILE_ICON_SIZE_1X` — icon-layout's icon inside its chip bounding box. */
boxedIconEl?: ReactNode | null
+ /** Same icon, pre-sized to `GRID_ARRANGEMENT_ICON_GLYPH_SIZE_1X` — icon-layout arrangement 0's larger chip. */
+ gridArrangementIconEl?: ReactNode | null
/** Whether to render the Supabase wordmark signature — logo-grid only, toggleable since it already shows partner marks. Defaults to true. */
showBrandLogo?: boolean
/** Rendered height (px, pre-scaled) of the eyebrow pill + its gap above the headline, or 0 if no eyebrow — Announcement uses this to keep the headline from drifting too far down when an eyebrow is present. */
eyebrowBlockHeight?: number
- /** Full-canvas background texture data URI (lib/design/og-backgrounds.ts), or null for a flat `bg` color — applied by rootBase() so any template can opt in. */
+ /** Full-canvas background texture data URI (lib/design/og-backgrounds.ts), or null for a flat `bg` color — applied by backgroundPanel() so any template can opt in. */
backgroundImageUri?: string | null
}
@@ -95,15 +97,15 @@ function iconTile(p: TemplateParts, content: ReactNode): ReactElement {
return iconTileAtScale(p.scaleFactor, content)
}
-function iconTileAtScale(scaleFactor: number, content: ReactNode): ReactElement {
+function iconTileAtScale(scaleFactor: number, content: ReactNode, sizePx1x: number = ICON_TILE_SIZE_1X): ReactElement {
return (