---
layout: ~/layouts/MdxDocLayout.astro
title: "CloudflareLogo"
description: "Official Cloudflare logo component with glyph and full logo variants."
sourceFile: "components/cloudflare-logo"
---

import ComponentExample from "~/components/docs/ComponentExample.astro";
import ComponentSection from "~/components/docs/ComponentSection.astro";
import {
  CloudflareLogoBasicDemo,
  CloudflareLogoGlyphDemo,
  CloudflareLogoColorVariantsDemo,
  CloudflareLogoGlyphVariantsDemo,
  CloudflareLogoSizesDemo,
  CloudflareLogoCopyDemo,
  PoweredByCloudflareBasicDemo,
  PoweredByCloudflareVariantsDemo,
  PoweredByCloudflareFooterDemo,
} from "~/components/demos/CloudflareLogoDemo";

{/* Hero Demo */}

<ComponentSection>
  <ComponentExample demo="CloudflareLogoBasicDemo">
    <CloudflareLogoBasicDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* Installation */}

<ComponentSection>

## Installation

### Barrel

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

### Granular

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

</ComponentSection>

{/* Usage */}

<ComponentSection>

## Usage

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

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

</ComponentSection>

{/* Examples */}

<ComponentSection>

## Examples

### Glyph Only

<p>
  Use <code>variant="glyph"</code> to display just the cloud icon without the
  wordmark.
</p>
<ComponentExample demo="CloudflareLogoGlyphDemo">
  <CloudflareLogoGlyphDemo client:visible />
</ComponentExample>

### Color Variants

<p>The logo supports three color schemes: brand colors, black, and white.</p>
<ComponentExample demo="CloudflareLogoColorVariantsDemo">
  <CloudflareLogoColorVariantsDemo client:visible />
</ComponentExample>

### Glyph Color Variants

<ComponentExample demo="CloudflareLogoGlyphVariantsDemo">
  <CloudflareLogoGlyphVariantsDemo client:visible />
</ComponentExample>

### Sizing

<p>
  Size the logo using CSS width classes. The height adjusts automatically to
  maintain aspect ratio.
</p>
<ComponentExample demo="CloudflareLogoSizesDemo">
  <CloudflareLogoSizesDemo client:visible />
</ComponentExample>

### Brand Assets Menu

  <p>
    Combine with DropdownMenu to create a brand assets menu. Use <code>generateCloudflareLogoSvg()</code> to
    get copy-paste ready SVG markup.
  </p>
  <ComponentExample demo="CloudflareLogoCopyDemo">
    <CloudflareLogoCopyDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* PoweredByCloudflare */}

<ComponentSection>

## PoweredByCloudflare

  <p>
    A pre-built "Powered by Cloudflare" badge component for footers and attribution.
  </p>

### Basic Usage

<ComponentExample demo="PoweredByCloudflareBasicDemo">
  <PoweredByCloudflareBasicDemo client:visible />
</ComponentExample>

### Color Variants

<ComponentExample demo="PoweredByCloudflareVariantsDemo">
  <PoweredByCloudflareVariantsDemo client:visible />
</ComponentExample>

### Footer Example

  <ComponentExample demo="PoweredByCloudflareFooterDemo">
    <PoweredByCloudflareFooterDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* SVG Generation */}

<ComponentSection>

## SVG Generation

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

```tsx
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" }),
);
```

</ComponentSection>

{/* API Reference */}

<ComponentSection>

## API Reference

  <p>
    CloudflareLogo extends <code>SVGSVGElement</code> and accepts all standard SVG attributes.
  </p>
  <div class="overflow-x-auto">
    <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>
  </div>

### PoweredByCloudflare

  <p>
    Extends <code>HTMLAnchorElement</code> and accepts all standard anchor attributes.
  </p>
  <div class="overflow-x-auto">
    <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>
  </div>
</ComponentSection>
