IconLink
Example source
import IconLink from 'starlight-plugin-icons/components/IconLink.astro'
<IconLink href="#" icon="i-ph:thumbs-up-duotone" title="Link" flat />
Rendered
Variants
Section titled “Variants”Icon only
Icon + text
Icon + text + href
Customization
Section titled “Customization”icon
string — icon classhref?
string — destination URLtitle?
string — label shown under the icon; if omitted, slot content is usedflat?
boolean — use a simpler designclass?
string — additional CSS classes
Classes
Section titled “Classes”starlight-iconlink
starlight-iconlink--flat
starlight-iconlink--enhanced
starlight-iconlink__icon
starlight-iconlink__title
CSS variables
Section titled “CSS variables”: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
Section titled “Example”Smaller, icon-only, round
.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