# GeoIcons

> GeoIcons is a set of geographic map icons, distributed as tree-shakeable npm packages for React (`@geoicons/react`), Vue (`@geoicons/vue`), Angular (`@geoicons/angular`), and vanilla JavaScript (`@geoicons/vanilla`, a framework-free DOM factory). It covers countries and territories plus areas — continents, regions, blocs, peninsulas, deserts, basins, and other geographic zones. Each icon is a tree-shakeable SVG component themed with `currentColor`, with adjustable stroke weight and fill. It is dual-licensed: free under GPLv3 for open source, with a commercial license that waives copyleft for closed-source and commercial use.

## What it is

- **Packages:** `@geoicons/react` (React 18+), `@geoicons/vue` (Vue 3+), `@geoicons/angular` (Angular 15.1+), `@geoicons/vanilla` (framework-free — a `createGeoIcons()` `<i data-geoicon>` scanner, styled with CSS) — same icons, one per framework. Import icons from per-category subpaths so bundlers tree-shake the rest: `@geoicons/<fw>/countries` (country & territory shapes) and `@geoicons/<fw>/areas` (continents, regions, blocs, peninsulas, deserts, basins, and seas — continent is a site filter facet, not a subpath). EEZ / maritime-boundary country variants (`/countries/eez`) are a planned representation.
- **API:** Convenience props are `size` (default 24) and `strokeWidth` (default 1); color is set with the native `stroke` (default `currentColor`) and `fill` (default `none`) SVG attributes, forwarded via the SVGProps spread. A filled icon is `fill="currentColor"` (add `strokeWidth={0}` for a bare silhouette); a colored outline is `stroke="#4f46e5"`. There is no `variant` or `color` prop — weight and fill are continuous.
- **Accessibility:** Decorative by default (`aria-hidden`); pass `aria-label` to make an icon meaningful (`role="img"` + `<title>`).
- **Tree-shaking:** Every icon is its own named export with `sideEffects:false`, so consumers only bundle the icons they import.

## Install

```bash
npm install @geoicons/react
```

```tsx
import { Us } from "@geoicons/react/countries";
<Us size={48} strokeWidth={1.5} />
```

## Licensing

- **Free:** GPLv3 — for open-source projects.
- **Commercial:** a one-time, permanent license key that waives copyleft. Verified fully offline by `<IconProvider>`. Pricing: Hobby $99 (1 developer, 1 product), Business $199 (unlimited developers & products), Extended $399 (unlimited developers, 1 product, redistribution/SDK/themes). Annual options also available (Hobby $29/yr, Business $59/yr, Extended $129/yr).

## Docs

- [Getting started](https://geoicons.io/docs/getting-started): install and render your first icon.
- [API](https://geoicons.io/docs/api): every prop a GeoIcon accepts.
- [Styling](https://geoicons.io/docs/styling): weight, color, and fill via currentColor.
- [Accessibility](https://geoicons.io/docs/accessibility): decorative by default, meaningful with aria-label.
- [Licensing](https://geoicons.io/docs/license): GPLv3 vs commercial, IconProvider.

## Blog

- [Blog](https://geoicons.io/blog): releases, deep dives, and guides ([RSS](https://geoicons.io/blog/feed.xml)).
- [Introducing GeoIcons](https://geoicons.io/blog/introducing-geoicons): the launch post — 255 countries + 167 areas, tree-shaking, theming, accessibility, and dual licensing.
- [Why an icon library doesn't have to bloat your bundle](https://geoicons.io/blog/tree-shaking-icons): how tree-shaking works, how a `<Icon name="..." />` registry defeats it, and how to verify your own bundle.

## Links

- [Home](https://geoicons.io): product overview.
- [Icon catalog](https://geoicons.io/icons): search and copy every icon. Browse [countries](https://geoicons.io/icons/countries) and [areas](https://geoicons.io/icons/areas).
- [Pricing](https://geoicons.io/pricing): licensing tiers and FAQ.
- [npm package](https://www.npmjs.com/package/@geoicons/react): @geoicons/react.
- [GitHub](https://github.com/getgeoicons): source and issues.

## Full documentation

- [llms-full.txt](https://geoicons.io/llms-full.txt): expanded brief with full API, pricing, and FAQ.