Icon Link

The atomic nav/menu link — [leading icon] label [trailing affordance]. Inherits currentColor, so it sits on any surface without knowing the brand; the containing bar or menu sets the color context. The single most-composed brick in app chrome.

Stable .astro import EsaIconLink from '@esa/ecology/esa-icon-link.astro';

Preview

<EsaIconLink icon="trees" trailing="chevron-down">Mitigation work</EsaIconLink>

Inherits the surface (currentColor)

The link carries no color of its own — it inherits currentColor. Drop the same markup on a dark bar or a light surface and it just works.

<!-- on a dark bar: color set by the parent -->
<div style="color:#fff;background:#13273e">
  <EsaIconLink icon="database" trailing="chevron-down">Data management</EsaIconLink>
</div>

Sizes

<EsaIconLink icon="credit-card" size="sm">Funding</EsaIconLink>
<EsaIconLink icon="credit-card" size="md">Funding</EsaIconLink>

Link · trigger · active

Dashboard

<EsaIconLink href="/dashboard" icon="layout-dashboard">Dashboard</EsaIconLink>
<EsaIconLink icon="circle-user" trailing="chevron-down">Angela Zhao</EsaIconLink>
<EsaIconLink icon="trending-up" active>Reporting</EsaIconLink>

API

Prop	Type	Default	Description
`href`	`string`	—	When present renders an <a>; otherwise a <button> (e.g. a dropdown trigger).
`icon`	`string`	—	Leading Lucide icon name.
`trailing`	`string`	—	Trailing Lucide icon — the dropdown/disclosure affordance, e.g. "chevron-down".
`size`	`'sm' \| 'md'`	`'md'`	sm = 14px (sub-bars), md = 16px (primary bars).
`active`	`boolean`	`false`	Selected / current state (sets aria-current and semibold).
`weight`	`'regular' \| 'medium' \| 'semibold'`	`'medium'`	Label weight.

Theming surface

Every public token this component reads, extracted from its source at build time. The Resolves to column walks each token's real lineage — component → semantic → primitive → raw value — so you can see exactly where re-pointing it lands. A spoke re-skins by overriding these in its theme-<slug>.css; component internals are never edited. No hook for what you need? File it with /request-lego.

Token	Tier	Resolves to
`--focus-ring-width`	component	`2px`
`--icon-link-font-size-md`	component	`1rem`
`--icon-link-font-size-sm`	component	`0.875rem`
`--icon-link-gap`	component	`0.375rem` via `--spacing-150`
`--focus-ring-offset`	semantic	`2px`
`--font-sans`	semantic	`'DM Sans', sans-serif`
`--font-weight-medium`	primitive	`500`
`--font-weight-regular`	primitive	`350`
`--font-weight-semibold`	primitive	`550`
`--radius-100`	primitive	`0.25rem`