Icons

To display icons from Starlight’s built-in icon set, use the <Icon> component.

Preview

Import

import { Icon } from '@astrojs/starlight/components';

Usage

Display an icon using the <Icon> component. An icon requires a name set to one of Starlight’s built-in icons and can optionally include a label to provide context for screen readers.

MDX

import { Icon } from '@astrojs/starlight/components';

<Icon name="star" />
<Icon name="starlight" label="The Starlight logo" />

Markdoc

{% icon name="star" /%}
{% icon name="starlight" label="The Starlight logo" /%}

Preview

Customize icons

The size and color attributes can be used to adjust the icon’s appearance using CSS units and color values. The class attribute can be used to add custom CSS classes to the icon.

MDX

import { Icon } from '@astrojs/starlight/components';

<Icon name="star" color="goldenrod" size="2rem" />
<Icon name="rocket" color="var(--sl-color-text-accent)" />

Markdoc

{% icon name="star" color="goldenrod" size="2rem" /%}
{% icon name="rocket" color="var(--sl-color-text-accent)" /%}

Preview

<Icon> Props

Implementation: Icon.astro

The <Icon> component accepts the following props:

name

required
type: string

The name of the icon to display set to one of Starlight’s built-in icons.

label

type: string

An optional label to provide context for assistive technologies, such as screen readers.

When label is not set, the icon will be completely hidden from assistive technologies. In this case, make sure the context is still understandable without the icon. For example, a link containing only the icon must include the label attribute in order to be accessible, but if a link contains text and the icon is purely decorative, omitting the label may make sense.

size

type: string

The size of the icon using CSS units.

color

type: string

The color of the icon using a CSS color value.

class

type: string

Custom CSS classes to add to the icon.