API
Every GeoIcons package renders an inline <svg> and accepts the same set of props.
The prop contract below is the source of truth; only the template syntax differs per
framework, so learn it once and use it anywhere. Pick your framework below for install and
usage.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | string | 24 | Width and height of the icon. |
strokeWidth | number | 1 | Outline thickness. Set to 0 for a filled icon. |
stroke | string | currentColor | Outline color. Native SVG attr, inherits text color by default. |
fill | string | none | Fill color (native SVG attr). Pass currentColor for a solid icon; add strokeWidth={0} for a bare silhouette. |
aria-label | string | — | Makes the icon meaningful: adds role="img" + <title>. |
aria-hidden | boolean | true | Decorative by default. Overridden when aria-label is set. |
size and strokeWidth are the only convenience props; stroke, fill, and every
other native SVG attribute (e.g. class/className, style, event handlers, data-*)
are forwarded straight to the underlying <svg>.
Angular is the one exception to attribute forwarding: it has no {...rest} spread, so size,
strokeWidth, stroke, fill, and aria-label are explicit inputs and other attributes go on
the <geoicon-*> host element. See the Angular page.
There is no variant prop. Weight and fill are continuous. Drive them with strokeWidth and
fill directly. See Styling.
Framework packages
The same icons and the same props ship per framework as separate packages, so you only install what you use.
| Package | Docs | Status |
|---|---|---|
@geoicons/react | React | ✅ Available |
@geoicons/vue | Vue | ✅ Available |
@geoicons/angular | Angular | ✅ Available |
@geoicons/vanilla | Vanilla JS | ✅ Available |