Sidebar Icons
-
Enable the sidebar feature
Section titled “Enable the sidebar feature”astro.config.mjs Icons({sidebar: true,starlight: { ... },}) -
Configure UnoCSS to discover the icons
Section titled “Configure UnoCSS to discover the icons”Set
extractSafelist: true
to automatically generate a safelist, or if you prefer not to do that, you need to configure UnoCSS to discover the icons.Enable extraction and add the cache to
.gitignore
.astro.config.mjs Icons({sidebar: true,extractSafelist: true,starlight: { ... },}).gitignore .starlight-iconsPoint UnoCSS to your
astro.config.mjs
so icon classes in the sidebar are extracted.uno.config.ts export default defineConfig({content: {pipeline: {include: [/\.(vue|svelte|[jt]sx|vine\.ts|mdx?|astro|elm|php|phtml|html|mjs)($|\?)/,],},filesystem: ['astro.config.mjs',],},}) -
Install an Icon collection
Section titled “Install an Icon collection”Choose any collection. See the Icon Gallery.
Terminal window npm i -D @iconify-json/{collection}Terminal window pnpm add -D @iconify-json/{collection}Terminal window yarn add -D @iconify-json/{collection}Terminal window bun add -D @iconify-json/{collection}Terminal window ni -D @iconify-json/{collection}
Example
Section titled “Example”Add an icon
field to each sidebar entry.
Format: i-<collection>:<name>
Icons({ starlight: { sidebar: [ { label: 'Guides', items: [ { icon: 'i-ph:rocket-launch-duotone', label: 'Intro', slug: 'guides/intro' }, ], }, ], },})
Rendered

Customization
Section titled “Customization”Set CSS variables to configure sidebar icon size and spacing.
:root { --spi-sidebar-icon-size: 1.25rem; --spi-sidebar-icon-gap: 0.25rem;}