<CloudflareLogo className="w-72" />Installation
npm install @cloudflare/kumoUsage
import { CloudflareLogo } from "@cloudflare/kumo";
export default function Example() {
return <CloudflareLogo className="w-36" />;
}Examples
Glyph Only
Use variant=“glyph” to display just the cloud icon without the
wordmark.
<CloudflareLogo variant="glyph" className="w-24" />Color Variants
The logo supports three color schemes: brand colors, black, and white.
<CloudflareLogo color="color" /> {/* Brand colors (default) */}
<CloudflareLogo color="black" /> {/* Solid black */}
<CloudflareLogo color="white" /> {/* Solid white */}Glyph Color Variants
<CloudflareLogo variant="glyph" color="color" />
<CloudflareLogo variant="glyph" color="black" />
<CloudflareLogo variant="glyph" color="white" />Sizing
Size the logo using CSS width classes. The height adjusts automatically to maintain aspect ratio.
<CloudflareLogo className="w-20" />
<CloudflareLogo className="w-28" />
<CloudflareLogo className="w-44" />Brand Assets Menu
Combine with DropdownMenu to create a brand assets menu. Use generateCloudflareLogoSvg() to
get copy-paste ready SVG markup.
Click to open the brand assets menu
import {
CloudflareLogo,
DropdownMenu,
generateCloudflareLogoSvg,
} from "@cloudflare/kumo";
<DropdownMenu>
<DropdownMenu.Trigger>
<button>
<CloudflareLogo variant="glyph" color="white" className="w-8" />
Logo
</button>
</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Item
onSelect={() => navigator.clipboard.writeText(
generateCloudflareLogoSvg({ variant: "glyph" })
)}
>
Copy logo as SVG
</DropdownMenu.Item>
<DropdownMenu.Item
onSelect={() => navigator.clipboard.writeText(
generateCloudflareLogoSvg({ variant: "full" })
)}
>
Copy full logo as SVG
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu>PoweredByCloudflare
A pre-built “Powered by Cloudflare” badge component for footers and attribution.
Basic Usage
<PoweredByCloudflare />Color Variants
<PoweredByCloudflare /> {/* color (default) */}
<PoweredByCloudflare color="black" />
<PoweredByCloudflare color="white" />Footer Example
<footer className="flex items-center justify-between px-6 py-4">
<span>© 2026 Your Company</span>
<PoweredByCloudflare />
</footer>SVG Generation
Use generateCloudflareLogoSvg() to get copy-paste ready SVG markup for non-React contexts.
import { generateCloudflareLogoSvg } from "@cloudflare/kumo";
// Generate glyph SVG (cloud only)
const glyphSvg = generateCloudflareLogoSvg({ variant: "glyph" });
// Generate full logo SVG
const fullSvg = generateCloudflareLogoSvg({ variant: "full" });
// Generate black logo
const blackSvg = generateCloudflareLogoSvg({ color: "black" });
// Copy to clipboard
await navigator.clipboard.writeText(
generateCloudflareLogoSvg({ variant: "glyph", color: "color" })
);API Reference
CloudflareLogo extends SVGSVGElement and accepts all standard SVG attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | ”glyph” | “full" | "full” | Logo variant. glyph shows just the cloud icon, full includes the wordmark. |
| color | ”color” | “black” | “white" | "color” | Color scheme. color uses brand colors, black and white are solid. |
| className | string | - | CSS classes for sizing (e.g., w-36). Height adjusts automatically. |
PoweredByCloudflare
Extends HTMLAnchorElement and accepts all standard anchor attributes.
| Prop | Type | Default | Description |
|---|---|---|---|
| color | ”color” | “black” | “white" | "color” | Color scheme for the logo and text. |
| href | string | ”https://www.cloudflare.com” | Link destination. Opens in a new tab by default. |