Icons Reference

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.

up-caret down-caret right-caret left-caret up-arrow down-arrow right-arrow left-arrow bars translate pencil pen document add-document setting external download cloud-download moon sun laptop open-book information magnifier forward-slash close error warning approve-check-circle approve-check rocket star puzzle list-format random comment comment-alt heart github gitlab bitbucket codePen farcaster discord gitter twitter x.com mastodon codeberg youtube threads linkedin twitch azureDevOps microsoftTeams instagram stackOverflow telegram rss facebook email phone reddit patreon signal slack matrix hackerOne openCollective blueSky discourse zulip pinterest tiktok astro alpine pnpm biome bun mdx apple linux homebrew nix starlight pkl node cloudflare vercel netlify deno jsr nostr backstage confluence jira storybook vscode jetbrains zed vim figma sketch npm sourcehut substack seti:folder seti:bsl seti:mdo seti:salesforce seti:asm seti:bicep seti:bazel seti:c seti:c-sharp seti:html seti:cpp seti:clojure seti:coldfusion seti:config seti:crystal seti:crystal_embedded seti:json seti:css seti:csv seti:xls seti:cu seti:cake seti:cake_php seti:d seti:word seti:elixir seti:elixir_script seti:hex seti:elm seti:favicon seti:f-sharp seti:git seti:go seti:godot seti:gradle seti:grails seti:graphql seti:hacklang seti:haml seti:mustache seti:haskell seti:haxe seti:jade seti:java seti:javascript seti:jinja seti:julia seti:karma seti:kotlin seti:dart seti:liquid seti:livescript seti:lua seti:markdown seti:argdown seti:info seti:clock seti:maven seti:nim seti:github seti:notebook seti:nunjucks seti:npm seti:ocaml seti:odata seti:perl seti:php seti:pipeline seti:pddl seti:plan seti:happenings seti:powershell seti:prisma seti:pug seti:puppet seti:purescript seti:python seti:react seti:rescript seti:R seti:ruby seti:rust seti:sass seti:spring seti:slim seti:smarty seti:sbt seti:scala seti:ethereum seti:stylus seti:svelte seti:swift seti:db seti:terraform seti:tex seti:default seti:twig seti:typescript seti:tsconfig seti:vala seti:vite seti:vue seti:wasm seti:wat seti:xml seti:yml seti:prolog seti:zig seti:zip seti:wgt seti:illustrator seti:photoshop seti:pdf seti:font seti:image seti:svg seti:sublime seti:code-search seti:shell seti:video seti:audio seti:windows seti:jenkins seti:babel seti:bower seti:docker seti:code-climate seti:eslint seti:firebase seti:firefox seti:gitlab seti:grunt seti:gulp seti:ionic seti:platformio seti:rollup seti:stylelint seti:yarn seti:webpack seti:lock seti:license seti:makefile seti:heroku seti:todo seti:ignored

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:

   npm

   npm install @iconify-json/lucide

   pnpm

   pnpm add @iconify-json/lucide

   Yarn

   yarn add @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.