Prototype Library

Icon

The inherited Ecology icon — inline Lucide SVGs from a built-in registry, no icon dependency. Stroke-based 24×24 outlines that take currentColor, so they pick up whatever text color surrounds them.

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

Common icons

A slice of the built-in registry. Icons inherit currentColor from their parent — no color prop needed.

search
filter
check
x
chevron-down
chevron-right
info
triangle-alert
circle-check
download
file-text
calendar
user
trees
database
trending-up
history
settings 
<EsaIcon name="search" />
<EsaIcon name="filter" />
<EsaIcon name="check" />

Sizes

Five steps — the shared xs–lg scale plus xl. Built to sit on a row with same-size buttons and inputs.

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

Custom glyphs & accessibility

For a glyph outside the registry, pass the inner SVG markup via paths — no fork needed. Add label when the icon carries meaning on its own; without it the icon is treated as decorative and hidden from assistive tech. 

<EsaIcon name="biochar-leaf" paths='<path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/>' label="Biochar Atlas" size="xl" />

API

PropTypeDefaultDescription
name string — Required. Lucide icon name (kebab-case), e.g. "chevron-down". Resolved against the built-in registry.
size 'xs' | 'sm' | 'md' | 'lg' | 'xl' 'md' Icon size: 14 / 16 / 20 / 24 / 28px. The shared scale plus xl, so icons line up with buttons and inputs on a row.
label string — Accessible label. When omitted the icon is aria-hidden (decorative).
paths string — Inner SVG markup (the path/circle children, no svg wrapper) for a glyph outside the registry — the fallback when name is unknown.