Installation

Barrel

Granular

Usage

export default function Example() {
  return <CloudflareLogo className="w-36" />;
}

Examples

Glyph Only

Use variant="glyph" to display just the cloud icon without the wordmark.

Color Variants

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

Glyph Color Variants

Sizing

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

Brand Assets Menu

Combine with DropdownMenu to create a brand assets menu. Use <code>generateCloudflareLogoSvg()</code> to
get copy-paste ready SVG markup.

PoweredByCloudflare

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

Basic Usage

Color Variants

Footer Example

SVG Generation

Use <code>generateCloudflareLogoSvg()</code> to get copy-paste ready SVG markup for non-React contexts.

// 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 <code>SVGSVGElement</code> and accepts all standard SVG attributes.


<table class="w-full text-left text-sm">
  <thead>
    <tr class="border-b border-kumo-hairline">
      <th class="py-3 pr-4 font-medium">Prop</th>
      <th class="py-3 pr-4 font-medium">Type</th>
      <th class="py-3 pr-4 font-medium">Default</th>
      <th class="py-3 font-medium">Description</th>
    </tr>
  </thead>
  <tbody class="text-kumo-subtle">
    <tr class="border-b border-kumo-hairline">
      <td class="py-3 pr-4 font-mono text-kumo-default">variant</td>
      <td class="py-3 pr-4 font-mono">"glyph" | "full"</td>
      <td class="py-3 pr-4 font-mono">"full"</td>
      <td class="py-3">Logo variant. <code>glyph</code> shows just the cloud icon, <code>full</code> includes the wordmark.</td>
    </tr>
    <tr class="border-b border-kumo-hairline">
      <td class="py-3 pr-4 font-mono text-kumo-default">color</td>
      <td class="py-3 pr-4 font-mono">"color" | "black" | "white"</td>
      <td class="py-3 pr-4 font-mono">"color"</td>
      <td class="py-3">Color scheme. <code>color</code> uses brand colors, <code>black</code> and <code>white</code> are solid.</td>
    </tr>
    <tr>
      <td class="py-3 pr-4 font-mono text-kumo-default">className</td>
      <td class="py-3 pr-4 font-mono">string</td>
      <td class="py-3 pr-4 font-mono">-</td>
      <td class="py-3">CSS classes for sizing (e.g., <code>w-36</code>). Height adjusts automatically.</td>
    </tr>
  </tbody>
</table>

PoweredByCloudflare

Extends <code>HTMLAnchorElement</code> and accepts all standard anchor attributes.


<table class="w-full text-left text-sm">
  <thead>
    <tr class="border-b border-kumo-hairline">
      <th class="py-3 pr-4 font-medium">Prop</th>
      <th class="py-3 pr-4 font-medium">Type</th>
      <th class="py-3 pr-4 font-medium">Default</th>
      <th class="py-3 font-medium">Description</th>
    </tr>
  </thead>
  <tbody class="text-kumo-subtle">
    <tr class="border-b border-kumo-hairline">
      <td class="py-3 pr-4 font-mono text-kumo-default">color</td>
      <td class="py-3 pr-4 font-mono">"color" | "black" | "white"</td>
      <td class="py-3 pr-4 font-mono">"color"</td>
      <td class="py-3">Color scheme for the logo and text.</td>
    </tr>
    <tr>
      <td class="py-3 pr-4 font-mono text-kumo-default">href</td>
      <td class="py-3 pr-4 font-mono">string</td>
      <td class="py-3 pr-4 font-mono">"https://www.cloudflare.com"</td>
      <td class="py-3">Link destination. Opens in a new tab by default.</td>
    </tr>
  </tbody>
</table>