Icons

There are two icon components which pull from two different icon sets.

The Icon component from Nimbus is available as a standalone component.

Primarily, this is used for Cloudflare product icons which are stored in /src/icons/*.svg.

import { Icon } from "~/components";

<Icon name="workers" class="text-5xl text-orange-400" />

Components like Card and LinkCard accept a plain icon string prop — any iconify ↗ icon name.

import { Card, LinkCard } from "~/components";

<Card title="Example" icon="ph:rocket-launch" />
<LinkCard title="Example" href="/workers/" icon="ph:rocket-launch" />

Content authored before the Nimbus migration may still use Starlight-style icon names (for example icon="ph:terminal-window"). These are automatically mapped to an equivalent iconify icon at build time. New content should use iconify names directly.

Optionally, you can choose a corresponding icon from Starlight’s Icons ↗ for cards or tabs.