CloudflareLogo
@cloudflare/kumo

CloudflareLogo

Official Cloudflare logo component with glyph and full logo variants. 

<CloudflareLogo className="w-72" />

Installation 

npm install @cloudflare/kumo

Usage 

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

Powered by Cloudflare 
<PoweredByCloudflare />

Color Variants

Powered by CloudflarePowered by Cloudflare
Powered by Cloudflare
 
<PoweredByCloudflare />              {/* color (default) */}
<PoweredByCloudflare color="black" />
<PoweredByCloudflare color="white" />

Footer Example 

<footer className="flex items-center justify-between px-6 py-4">
  <span>&copy; 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.