<script lang="ts">
import { CloudflareLogo } from 'kumo-svelte';
</script>
<CloudflareLogo class="w-72" />Installation
Barrel
import { CloudflareLogo, PoweredByCloudflare } from 'kumo-svelte';Granular
import { CloudflareLogo, PoweredByCloudflare } from 'kumo-svelte/components/cloudflare-logo';Usage
<script lang="ts"> import { CloudflareLogo } from 'kumo-svelte';</script><CloudflareLogo class="w-36" />Examples
Glyph Only
Use variant="glyph" to display just the cloud icon without the
wordmark.
<script lang="ts">
import { CloudflareLogo } from 'kumo-svelte';
</script>
<CloudflareLogo variant="glyph" class="w-24" />Color Variants
The logo supports three color schemes: brand colors, black, and white.
<script lang="ts">
import { CloudflareLogo } from 'kumo-svelte';
</script>
<div class="flex flex-wrap items-center gap-8">
<CloudflareLogo class="w-28" color="color" />
<div class="rounded-lg bg-white p-4">
<CloudflareLogo class="w-28" color="black" />
</div>
<div class="rounded-lg bg-black p-4">
<CloudflareLogo class="w-28" color="white" />
</div>
</div>Glyph Color Variants
<script lang="ts">
import { CloudflareLogo } from 'kumo-svelte';
</script>
<div class="flex flex-wrap items-center gap-8">
<CloudflareLogo variant="glyph" class="w-12" color="color" />
<div class="rounded-lg bg-white p-4">
<CloudflareLogo variant="glyph" class="w-12" color="black" />
</div>
<div class="rounded-lg bg-black p-4">
<CloudflareLogo variant="glyph" class="w-12" color="white" />
</div>
</div>Sizing
Size the logo using CSS width classes. The height adjusts automatically to maintain aspect ratio.
<script lang="ts">
import { CloudflareLogo } from 'kumo-svelte';
</script>
<div class="flex flex-wrap items-end gap-6">
<CloudflareLogo class="w-20" />
<CloudflareLogo class="w-28" />
<CloudflareLogo class="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
<script lang="ts">
import { CloudflareLogo, DropdownMenu } from '$lib';
import { ArrowSquareOut, Cloud, Code, DownloadSimple } from 'phosphor-svelte';
import { generateCloudflareLogoSvg } from '$lib/components/cloudflare-logo';
let copied = $state<string | null>(null);
async function copyToClipboard(text: string, label: string) {
await navigator.clipboard.writeText(text);
copied = label;
setTimeout(() => {
copied = null;
}, 2000);
}
</script>
<div class="flex items-center gap-4">
<DropdownMenu>
<DropdownMenu.Trigger>
<button
type="button"
class="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" class="w-8" />
<span class="font-medium">Logo</span>
</button>
</DropdownMenu.Trigger>
<DropdownMenu.Content>
<DropdownMenu.Item
icon={Cloud}
onSelect={() => copyToClipboard(generateCloudflareLogoSvg({ variant: 'glyph' }), 'glyph')}
>
{copied === 'glyph' ? 'Copied!' : 'Copy logo as SVG'}
</DropdownMenu.Item>
<DropdownMenu.Item
icon={Code}
onSelect={() => copyToClipboard(generateCloudflareLogoSvg({ variant: 'full' }), 'full')}
>
{copied === 'full' ? 'Copied!' : 'Copy full logo as SVG'}
</DropdownMenu.Item>
<DropdownMenu.Item
icon={DownloadSimple}
onSelect={() => window.open('https://www.cloudflare.com/press-kit/', '_blank', 'noopener')}
>
Download brand assets
</DropdownMenu.Item>
<DropdownMenu.Separator />
<DropdownMenu.Item
icon={ArrowSquareOut}
onSelect={() => window.open('https://www.cloudflare.com/brand-assets/', '_blank', 'noopener')}
>
Visit brand guidelines
</DropdownMenu.Item>
</DropdownMenu.Content>
</DropdownMenu>
<span class="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
<script lang="ts">
import { PoweredByCloudflare } from 'kumo-svelte';
</script>
<PoweredByCloudflare />Color Variants
<script lang="ts">
import { PoweredByCloudflare } from 'kumo-svelte';
</script>
<div class="flex flex-wrap items-center gap-4">
<PoweredByCloudflare />
<PoweredByCloudflare color="black" />
<div class="rounded-lg bg-black p-3">
<PoweredByCloudflare color="white" />
</div>
</div>Footer Example
<script lang="ts">
import { PoweredByCloudflare } from '$lib/components/cloudflare-logo';
</script>
<footer class="flex w-full items-center justify-between rounded-lg border border-kumo-hairline bg-kumo-elevated px-6 py-4">
<span class="text-sm text-kumo-subtle">© 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 "kumo-svelte";// Generate glyph SVG (cloud only)const glyphSvg = generateCloudflareLogoSvg({ variant: "glyph" });// Generate full logo SVGconst fullSvg = generateCloudflareLogoSvg({ variant: "full" });// Generate black logoconst blackSvg = generateCloudflareLogoSvg({ color: "black" });// Copy to clipboardawait 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. |
| class | string | - | CSS classes for sizing (e.g., w-36). Height adjusts automatically. |
CloudflareLogo.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. |