Icons
To display icons from Starlight’s built-in icon set, use the <Icon>
component.
Import
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.
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.
import { Card } 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)" /%}
<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.