Icon Reference & Catalog

Starlight includes a rich built-in icon set that you can embed anywhere using the <Icon> component, or pass into attributes like icon="rocket" on cards and asides.

Built-In Icon Catalog

Icon	Name / Identifier	Usage Example
	`rocket`	`<Icon name="rocket" />`
	`star`	`<Icon name="star" />`
	`information`	`<Icon name="information" />`
	`warning`	`<Icon name="warning" />`
	`pencil`	`<Icon name="pencil" />`
	`document`	`<Icon name="document" />`
	`setting`	`<Icon name="setting" />`
	`link`	`<Icon name="link" />`
	`external`	`<Icon name="external" />`
	`download`	`<Icon name="download" />`
	`cloud-download`	`<Icon name="cloud-download" />`
	`moon`	`<Icon name="moon" />`
	`sun`	`<Icon name="sun" />`
	`clock`	`<Icon name="clock" />`
	`laptop`	`<Icon name="laptop" />`
	`desktop`	`<Icon name="desktop" />`
	`mobile-android`	`<Icon name="mobile-android" />`
	`window`	`<Icon name="window" />`
	`database`	`<Icon name="database" />`
	`server`	`<Icon name="server" />`
	`code-branch`	`<Icon name="code-branch" />`
	`open-book`	`<Icon name="open-book" />`
	`notes`	`<Icon name="notes" />`
	`magnifier`	`<Icon name="magnifier" />`
	`bars`	`<Icon name="bars" />`
	`translate`	`<Icon name="translate" />`

How to Use Icons in Your Content

Import the Component: Include import { Icon } from '@astrojs/starlight/components'; at the top of your .mdx file.
Render Inline: Call the component anywhere in your body copy: <Icon name="rocket" />.
Pass Attributes: Customize size, color, or accessibility labels like <Icon name="star" color="accent" label="Favorite" />.

Behind the Curtain

Deploying production builds safely via CI/CD.

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

<Icon name="rocket" size="1.5rem"/> Deploying production builds safely via CI/CD.