Configuration

Use the all-in-one Icons integration.

astro.config.mjs

import Icons from 'starlight-plugin-icons'

export default {
  integrations: [
    Icons({
      // Toggle features
      sidebar: true,          // override Sidebar component
      codeblock: true,        // code block icons + CSS
      extractSafelist: true,  // scan content for icons safelist

      // Pass-through Starlight config (icon field supported in sidebar)
      starlight: {
        sidebar: [
          { label: 'Guide', items: [{ icon: 'i-ph:rocket-launch-duotone', label: 'Intro', slug: 'guide/intro' }] },
        ],
      },
    }),
  ],
}

Or specify the Astro integration and the Starlight plugin manually.

astro.config.mjs

import starlight from '@astrojs/starlight'
import { starlightIconsPlugin, starlightIconsIntegration } from 'starlight-plugin-icons'

export default {
  integrations: [
    starlight({ plugins: [starlightIconsPlugin()] }),
    starlightIconsIntegration(),
  ],
}