Skip to content

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

Icon only

Icon + text

Icon + text + href

  • 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
  • starlight-iconlink
  • starlight-iconlink--flat
  • starlight-iconlink--enhanced
  • starlight-iconlink__icon
  • starlight-iconlink__title
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;
}

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