Icons

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

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

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.

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

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

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

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.

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

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

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

Implementation: Icon.astro

The <Icon> component accepts the following props:

required
type: StarlightIcon

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

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.

type: string

The size of the icon using CSS units.

type: string

The color of the icon using a CSS color value.

type: string

Custom CSS classes to add to the icon.