Icons

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

astro-icon

The astro-icon ↗ package is available to use as a standalone component.

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

import { AstroIcon } from "~/components";

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

Starlight

The Starlight icon set is available to use in Tab, Card and other Starlight components.

import { StarlightIcon } from "~/components";

<StarlightIcon
  name="seti:shell"
  color="var(--sl-color-text-accent)"
  size="3rem"
/>

Icon library

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