GeoIcons fixes that one gap. It's a library of 422 (at the time of this post) geographic icons: 255 countries and 167 regions, continents, and unions like the EU. Every icon ships as a real component you import by name, not a sprite sheet or a font file you have to wire up.

What you actually get

422 icons, built from clean SVG artwork and optimized with SVGO. Each one is a named export. That's the whole point: you import the two icons your page needs, and your bundle carries two icons, not four hundred.

Here's a country and a region, side by side:

import { Us } from "@geoicons/react/countries";
import { EuropeanUnionEu } from "@geoicons/react/areas";

export default function Icons() {
  return (
    <>
      <Us width={24} />
      <EuropeanUnionEu width={24} />
    </>
  );
}

Countries use their ISO alpha-2 code in PascalCase, so the United States is Us and Japan is Jp. Regions use a readable slug, like EuropeanUnionEu. No lookup table, no <Icon name="us" /> indirection that quietly pulls the entire set into your bundle.

Works in your framework, not around it

Same icons, four packages:

npm install @geoicons/react
npm install @geoicons/vue
npm install @geoicons/angular
npm install @geoicons/vanilla

Vue and Angular get idiomatic components, not React wrappers in disguise. The vanilla package hands you a small function so you can drop icons into plain HTML without a build step. Whatever you're on, you import geography the same way you import a button.

Accessibility isn't an afterthought

Every icon renders an aria-label and a <title>, and each instance gets a unique ID so screen readers don't trip over duplicates when you render the same icon twice on a page. You don't configure any of that. It's how the components are built.

Tree-shaking is the whole design

This is worth repeating because it's the reason the library exists in this shape. There is no central registry mapping names to components. Import Jp and your bundle gets Jp. Import nothing else and nothing else ships. For a place-heavy app that might reference dozens of countries across different routes, that adds up.

The library is growing

Today it's 255 countries and 167 regions. Flags and country subdivisions (states, provinces, and the like) are in the works, so the count keeps climbing. If there's a place or a set you need, that feedback shapes what lands next.

Licensing, plainly

GeoIcons is dual-licensed. GPLv3 for open-source work, a commercial license for closed-source products. Pick the one that matches your project. The icons always render the same either way. There's no crippled free tier and no locked icons, just two license options for two kinds of use.

Try it

Browse the full set and search by country or region at geoicons.io, then install the package for your framework and import the two icons your page needs.

That's the pitch: geography, done properly, as components.