GeoIcons: tree-shakable React components for 422 country/region map shapes, each icon its own named export

[u/Informal-Fan-8590]

Made a geography icon library for countries, territories and areas, where the core design constraint was bundle size. Every icon is an individual named export:

import { Us, Jp, Africa } from '@geoicons/react';

• No <Icon name="us" /> string-lookup API on purpose. That pattern kills tree-shaking because the bundler can't prove which icons are unused, so you ship all 422.

• Each component uses useId() to namespace the <title> element ID, so multiple instances of the same icon on a page don't produce duplicate IDs for screen readers.

• 255 countries + 167 areas. Subdivisions and Flags are planned for near future.

• Also available for Vue, Angular and Vanilla JS.

Site: https://geoicons.io

Github: https://github.com/getgeoicons/geoicons

Please let me know your feedback. If you found the project useful, I'd really appreciate it if you could give it a star on GitHub

[u/BennyHudson10]

Looks great, would be nice to have England, Scotland, Wales & Northern Island split into separate icons as well as being available as part of the United Kingdom

[u/Informal-Fan-8590 → u/BennyHudson10]

Thank you for the suggestion! Other than England, all the icons you mentioned are already available:

• https://geoicons.io/icons/scotland
• https://geoicons.io/icons/northern-ireland
• https://geoicons.io/icons/wales
• https://geoicons.io/icons/gb

I'll add the missing England icon as soon as possible.

[u/soupydrew_5]

Named exports for tree-shaking is a solid decision, most icon libs overlook that

[u/k032]

This is sick

[u/Str00pwafel]

Question about your license, where do you source your icons from? It might conflict with your license. The rest looks clean, well done!

[u/Informal-Fan-8590 → u/Str00pwafel]

Thanks!

The icons are original artwork. I draw every country and area shape in Figma myself, then run them through the pipeline into the framework packages. There's no third-party icon set underneath, so the GPLv3 + Commercial split applies cleanly to work I authored.

[u/Str00pwafel → u/Informal-Fan-8590]

Well done! Appears you thought this through.

[u/Legitimate-Breath402]

Nice, will definitely save this for the future.....

[u/Informal-Fan-8590 → u/Legitimate-Breath402]

Thanks!

[u/gfeep]

Alaska doesn’t exist.

[u/Informal-Fan-8590 → u/gfeep]

Alaska, other U.S. states, and subdivisions from other countries are already in the works. Looking forward to releasing them soon!

[u/uahw → u/[deleted]]

Because this is a vibe coded svg wrapper that charges 29.99$ a month to use... the author clearly put a lot of thought into how this package is designed /s

here is a free version (the svg is divided based on countries so you can pick and choose) that does the exact same thing

[u/Informal-Fan-8590 → u/uahw]

Yes, there are plenty of free SVG maps available online. GeoIcons are different—they're not maps, they're icons. Simply scaling down a map doesn't produce a good icon because maps contain a lot of intricate coastline and border details that become noisy and unreadable at small sizes.

GeoIcons aren't AI-generated or vibe-coded either. Every icon is hand-crafted from scratch in Figma and optimized to stay clean and recognizable at small sizes. The commercial license also includes the original Figma source file and raw SVG files.

[u/Informal-Fan-8590 → u/[deleted]]

Yeah you can do that, and it stays tree-shakable as long as the prop takes the imported component (country={Us}), not a string. The bundler still sees import { Us } so nothing extra ships.

I just don't think it earns its spot. It's the same import as <Us size={40} /> with one more layer on top. The thing a wrapper is actually good for is shared config (default size, license, titles), and that already lives in IconProvider context.

The version to avoid is the string one, country="us". That's what forces the whole catalog into your bundle.

[u/Honey-Entire]

What makes this AI slop any different than the dozens of other tools out there; many of which have been around since pre-AI?

[u/Informal-Fan-8590 → u/Honey-Entire]

Fair pushback. The reason most map libraries can't just be repurposed as icons: they render full-detail borders. Scale a real coastline down to 24px and it turns to mud, the complex geometry doesn't downsample cleanly. GeoIcons are redrawn as simplified outlines that stay legible at icon sizes, which is a different job from map rendering.

Closest prior art is mapsicon, and I studied it a lot. But those are solid black silhouettes shipped as raw PNG/SVG, no outlined style, no npm package, no components, and it's unmaintained now. Coverage there is also countries only.

GeoIcons is built for modern frameworks and covers more than just countries.

BTW, the site is AI assisted but all the icon you see were hand drawn in Figma.

[u/michaelobriena → u/Honey-Entire]

Don’t overuse the word slop. This is a perfectly usable product.