Logo

Model and integration logos from svgl.app.

import { WORKFLOW_LOGOS } from "../components/workflow-logo";
import { WorkflowShell, WorkflowShellCard } from "../components/workflow-shell";

export default function WorkflowLogoExample() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-3 gap-2 sm:grid-cols-4 md:grid-cols-6">
      {Object.entries(WORKFLOW_LOGOS).map(([key, { label, logo: Logo }]) => (
        <WorkflowShell key={key}>
          <WorkflowShellCard className="flex h-14 items-center justify-center">
            <Logo className="size-6" />
          </WorkflowShellCard>
          <span className="text-muted-foreground truncate px-2 py-1.5 text-center text-[0.6875rem]">
            {label}
          </span>
        </WorkflowShell>
      ))}
    </div>
  );
}

$ bunx --bun shadcn@latest add @notra/workflow-logo

WorkflowLogo renders a brand mark by name. The marks come from svgl.app, with gradient ids prefixed so several logos can share a page. Single-color marks like OpenAI, Anthropic, GitHub, Grok and Resend use currentColor and follow the theme. Browserbase and context.dev aren’t on svgl.app yet, so their marks are the official ones from browserbase.com and context.dev.

WORKFLOW_LOGOS maps each name to its label and component if you want to build your own pickers. Logos marked tile, like Browserbase and context.dev, already come as a filled square, so icon tiles show them edge to edge.

Used in

GEO Workflow Builder

A workflow builder with a block palette, a playable canvas, a run log and a node sheet.