CloudflareLogo
@cloudflare/kumo

CloudflareLogo

Official Cloudflare logo component with glyph and full logo variants. 

import { CloudflareLogo } from "@cloudflare/kumo";

export function CloudflareLogoBasicDemo() {
  return <CloudflareLogo className="w-72" />;
}

Installation

Barrel 

import {
  CloudflareLogo,
  PoweredByCloudflare,
  generateCloudflareLogoSvg,
} from "@cloudflare/kumo";

Granular 

import {
  CloudflareLogo,
  PoweredByCloudflare,
  generateCloudflareLogoSvg,
} from "@cloudflare/kumo/components/cloudflare-logo";

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.

import { CloudflareLogo } from "@cloudflare/kumo";

export function CloudflareLogoGlyphDemo() {
  return <CloudflareLogo variant="glyph" className="w-24" />;
}

Color Variants

The logo supports three color schemes: brand colors, black, and white.

 
import { CloudflareLogo } from "@cloudflare/kumo";

export function CloudflareLogoColorVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-8">
      <CloudflareLogo className="w-28" color="color" />
      <div className="rounded-lg bg-white p-4">
        <CloudflareLogo className="w-28" color="black" />
      </div>
      <div className="rounded-lg bg-black p-4">
        <CloudflareLogo className="w-28" color="white" />
      </div>
    </div>
  );
}

Glyph Color Variants 

import { CloudflareLogo } from "@cloudflare/kumo";

export function CloudflareLogoGlyphVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-8">
      <CloudflareLogo variant="glyph" className="w-12" color="color" />
      <div className="rounded-lg bg-white p-4">
        <CloudflareLogo variant="glyph" className="w-12" color="black" />
      </div>
      <div className="rounded-lg bg-black p-4">
        <CloudflareLogo variant="glyph" className="w-12" color="white" />
      </div>
    </div>
  );
}

Sizing

Size the logo using CSS width classes. The height adjusts automatically to maintain aspect ratio.

 
import { CloudflareLogo } from "@cloudflare/kumo";

export function CloudflareLogoSizesDemo() {
  return (
    <div className="flex flex-wrap items-end gap-6">
      <CloudflareLogo className="w-20" />
      <CloudflareLogo className="w-28" />
      <CloudflareLogo className="w-44" />
    </div>
  );
}

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 { useState } from "react";
import { CloudflareLogo, DropdownMenu, generateCloudflareLogoSvg } from "@cloudflare/kumo";
import { CloudIcon, CodeIcon, DownloadSimpleIcon, ArrowSquareOutIcon } from "@phosphor-icons/react";

export function CloudflareLogoCopyDemo() {
  const [copied, setCopied] = useState<string | null>(null);

  const copyToClipboard = async (text: string, label: string) => {
    await navigator.clipboard.writeText(text);
    setCopied(label);
    setTimeout(() => setCopied(null), 2000);
  };

  return (
    <div className="flex items-center gap-4">
      <DropdownMenu>
        <DropdownMenu.Trigger>
          <button
            type="button"
            className="flex items-center gap-2 rounded-lg bg-black px-4 py-3 text-white transition-opacity hover:opacity-80"
          >
            <CloudflareLogo variant="glyph" color="white" className="w-8" />
            <span className="font-medium">Logo</span>
          </button>
        </DropdownMenu.Trigger>
        <DropdownMenu.Content>
          <DropdownMenu.Item
            icon={CloudIcon}
            onSelect={() =>
              copyToClipboard(
                generateCloudflareLogoSvg({ variant: "glyph" }),
                "glyph",
              )
            }
          >
            {copied === "glyph" ? "Copied!" : "Copy logo as SVG"}
          </DropdownMenu.Item>
          <DropdownMenu.Item
            icon={CodeIcon}
            onSelect={() =>
              copyToClipboard(
                generateCloudflareLogoSvg({ variant: "full" }),
                "full",
              )
            }
          >
            {copied === "full" ? "Copied!" : "Copy full logo as SVG"}
          </DropdownMenu.Item>
          <DropdownMenu.Item
            icon={DownloadSimpleIcon}
            onSelect={() =>
              window.open(
                "https://www.cloudflare.com/press-kit/",
                "_blank",
                "noopener",
              )
            }
          >
            Download brand assets
          </DropdownMenu.Item>
          <DropdownMenu.Separator />
          <DropdownMenu.Item
            icon={ArrowSquareOutIcon}
            onSelect={() =>
              window.open(
                "https://www.cloudflare.com/brand-assets/",
                "_blank",
                "noopener",
              )
            }
          >
            Visit brand guidelines
          </DropdownMenu.Item>
        </DropdownMenu.Content>
      </DropdownMenu>

      <span className="text-sm text-kumo-subtle">
        Click to open the brand assets menu
      </span>
    </div>
  );
}

PoweredByCloudflare

A pre-built “Powered by Cloudflare” badge component for footers and attribution.

Basic Usage

Powered by Cloudflare 
import { PoweredByCloudflare } from "@cloudflare/kumo";

// =============================================================================
// PoweredByCloudflare Demos
// =============================================================================

export function PoweredByCloudflareBasicDemo() {
  return <PoweredByCloudflare />;
}

Color Variants

Powered by CloudflarePowered by Cloudflare
Powered by Cloudflare
 
import { PoweredByCloudflare } from "@cloudflare/kumo";

export function PoweredByCloudflareVariantsDemo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <PoweredByCloudflare />
      <PoweredByCloudflare color="black" />
      <div className="rounded-lg bg-black p-3">
        <PoweredByCloudflare color="white" />
      </div>
    </div>
  );
}

Footer Example 

import { PoweredByCloudflare } from "@cloudflare/kumo";

export function PoweredByCloudflareFooterDemo() {
  return (
    <footer className="flex w-full items-center justify-between rounded-lg border border-kumo-line bg-kumo-elevated px-6 py-4">
      <span className="text-sm text-kumo-subtle">
        &copy; 2026 Your Company. All rights reserved.
      </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.

PropTypeDefaultDescription
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.
classNamestring-CSS classes for sizing (e.g., w-36). Height adjusts automatically.

PoweredByCloudflare

Extends HTMLAnchorElement and accepts all standard anchor attributes.

PropTypeDefaultDescription
color”color” | “black” | “white""color”Color scheme for the logo and text.
hrefstring”https://www.cloudflare.com”Link destination. Opens in a new tab by default.