Installation

0. Prerequisites

   • Astro 4+ and Starlight 0.35+
   • UnoCSS
   
   

1. Install the package

   npm

   npm i starlight-plugin-icons

   pnpm

   pnpm add starlight-plugin-icons

   yarn

   yarn add starlight-plugin-icons

   bun

   bun add starlight-plugin-icons

   ni

   ni starlight-plugin-icons

2. Replace Starlight with the plugin

   Icons() wraps the Starlight plugin, so replace your existing starlight() integration with it:

   astro.config.mjs

   import { defineConfig } from 'astro/config'
   import UnoCSS from 'unocss/astro'
   import starlight from '@astrojs/starlight'
   import Icons from 'starlight-plugin-icons'
   
   export default defineConfig({
     integrations: [
       UnoCSS(),
       starlight({
         title: 'My dull docs site',
       }),
       Icons({
         starlight: {
           title: 'My dull docs site',
         },
       }),
     ],
   })

3. Add the UnoCSS preset

   uno.config.ts

   import { defineConfig } from 'unocss'
   import { presetStarlightIcons } from 'starlight-plugin-icons/uno'
   
   export default defineConfig({
     presets: [presetStarlightIcons()],
   })

4. Enable the features

   See the specific guides for each feature:

   Sidebar Icons

   Code Block Icons

   Or use components exported by starlight-plugin-icons:

   Aside

   Card

   FileTree

   IconLink