IconLink

Example source

page.mdx

import IconLink from 'starlight-plugin-icons/components/IconLink.astro'

<IconLink href="#" icon="i-ph:thumbs-up-duotone" title="Link" flat />

Rendered

Link

Link

Tip

Use the flat prop to make the design simpler.

Variants

Icon only

Icon + text

Text

Text

Icon + text + href

Link

Link

Customization

Props

• icon string — icon class
• href? string — destination URL
• title? string — label shown under the icon; if omitted, slot content is used
• flat? boolean — use a simpler design
• class? string — additional CSS classes

Classes

• starlight-iconlink
• starlight-iconlink--flat
• starlight-iconlink--enhanced
• starlight-iconlink__icon
• starlight-iconlink__title

CSS variables

src/styles/custom.css

:root {
  --spi-iconlink-width: 10rem;
  --spi-iconlink-height: 9rem;
  --spi-iconlink-gap: 0.75rem;
  --spi-iconlink-icon-size: 3.25rem;
  --spi-iconlink-pad: 0.875rem;
  --spi-iconlink-radius: 0.375rem;
}

Example

Smaller, icon-only, round

src/styles/custom.css

.demo-iconlink-round {
  --spi-iconlink-width: 4.5rem;
  --spi-iconlink-height: 4.5rem;
  --spi-iconlink-gap: 0.25rem;
  --spi-iconlink-icon-size: 2rem;
  --spi-iconlink-pad: 0.5rem;
  --spi-iconlink-radius: 9999px;
}

Rendered