Prototype Library

Icon

The icon primitive across Ecology. It inlines the Lucide SVGs it needs (no icon dependency), inherits color via currentColor, and maps to five sizes — xs=14, sm=16, md=20, lg=24, xl=28.

Inherited .astro import EsaIcon from '@esa/ecology/esa-icon.astro';

Preview

<EsaIcon name="star" size="md" />

Sizes

Three sizes map to fixed pixel boxes via the --icon-size-* tokens.

<EsaIcon name="star" size="xs" />
<EsaIcon name="star" size="sm" />
<EsaIcon name="star" size="md" />
<EsaIcon name="star" size="lg" />
<EsaIcon name="star" size="xl" />

Color

Icons inherit currentColor, so they take the text color of their context — set color on a wrapper to tint them.

<span style="color: var(--color-content-brand)"><EsaIcon name="circle-check" size="lg" /></span>
<span style="color: var(--color-content-utility-warning)"><EsaIcon name="triangle-alert" size="lg" /></span>
<span style="color: var(--color-content-utility-danger)"><EsaIcon name="circle-x" size="lg" /></span>
<span style="color: var(--color-content-utility-info)"><EsaIcon name="info" size="lg" /></span>

The icons currently inlined in the lookup. Add entries to esa-icon.astro as new components need them.

home
settings
plus
x
check
chevron-down
chevron-up
chevron-left
chevron-right
chevrons-left
chevrons-right
search
filter
arrow-left
arrow-right
arrow-up
arrow-down
circle-alert
circle-check
circle-x
info
eye
pencil
trash-2
copy
download
upload
external-link
calendar
user
users
star
loader
menu
bell
triangle-alert
save
circle-question-mark

API

PropTypeDefaultDescription
name string required Lucide icon name (kebab-case), e.g. "chevron-down". Resolved against the inlined Lucide lookup; an unknown name renders an empty glyph.
size 'xs' | 'sm' | 'md' | 'lg' | 'xl' 'md' Icon size — xs=14, sm=16, md=20, lg=24, xl=28.
label string — Accessible label. When provided the icon becomes role="img"; when omitted the icon is decorative (aria-hidden).
paths string — Inner SVG markup (the <path>/<circle>… children, no <svg> wrapper) for a glyph not in the built-in registry. Lets a consumer supply brand- or feature-specific icons without forking this component — used as the fallback when `name` is unknown.

Accessibility

  • Decorative (default): no label → the icon is aria-hidden="true" and skipped by screen readers.
  • Meaningful: pass label → the icon gets role="img" + aria-label, e.g. .
  • The inner <svg> is focusable="false" to keep it out of the tab order in legacy browsers.