Lewati ke konten
Starlight

Icons Reference

Konten ini belum tersedia dalam bahasa Anda.

Starlight provides a set of built-in icons that you can display in your content using the <Icon> component. Icon sets from Iconify and local icons are also supported and can be used similarly.

Use icons

Icons can be displayed using the <Icon> component. They are also often used in other components, such as cards or settings like hero actions.

StarlightIcon type

Use the StarlightIcon TypeScript type to reference the names of Starlight’s supported icons.

src/icon.ts
import type { StarlightIcon } from '@astrojs/starlight/types';


function getIconLabel(icon: StarlightIcon) {
  // …
}

All icons

Built-in icons

A list of all built-in icons is shown below with their associated names. Click an icon to copy its name to your clipboard.

Iconify icons

Iconify distributes a wide range of icon sets that can also be used in Starlight just like the built-in icons. Starlight uses Astro Icon to support Iconify icons.

To get started, visit the Iconify icon sets library or the Icônes website to find the icon set you want to use.

The following example shows how to use the music icon from the Lucide icon set.

  1. Install the Iconify Lucide icon set:

    Terminal window
    npm install @iconify-json/lucide

  2. Use the icon in any use-case that supports built-in icons by using the Iconify icon identifier.

    For example, to use the Iconify icon with the <Icon> component, set the name attribute to lucide:music.

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

    <Icon name="lucide:music" />

Local icons

Local icons are SVG files stored in a directory of your choice within your project, optimized using SVGO and usable just like any other icon. Starlight uses Astro Icon to support local icons.

By default, local icons are expected to be in the src/icons/ directory of your project. SVGO options and the icon directory can be configured using the starlight.icons property in astro.config.mjs.

The following example shows how to use a logo.svg SVG file as an icon.

  1. Copy the logo.svg SVG file to the src/icons/ directory of your project.

    • Directorysrc/
      • Directorycontent/
        • Directorydocs/
          • Directoryguides/
            • guide.md
            • index.md
        • Directoryicons/
          • logo.svg
    • astro.config.mjs

  2. Use the icon in any use-case that supports built-in icons by using the slug of the icon file.

    For example, to use the logo.svg SVG file with the <Icon> component, set the name attribute to logo.

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

    <Icon name="logo" />

To learn more about how to use local icons, check out the “Local icons” guide in the Astro Icon docs.