Introducing GeoIcons: 422 tree-shakable geographic icons

GeoIcons is a library of geographic map icons for the web: 255 countries and 167 areas, 422 icons in total at the time of this post, built for React, Vue, Angular, and vanilla JS. More is on the way, including subdivisions and flags. Every icon is a named export, so your bundler keeps only the ones you import. Here are three of them, inheriting the current text color:

Key takeaways

• 422 icons: 255 countries (ISO 3166) + 167 areas (regions, continents, landforms, subdivisions).


• Tree-shakable by design. One import ships one icon, not the catalog.


• Themed with currentColor and an adjustable strokeWidth. Accessible out of the box.


• React, Vue, Angular, and vanilla JS. Free under GPLv3, commercial license available.

What ships in the box

The set covers 255 country icons, named by their ISO 3166 alpha-2 code, and 167 area icons for regions, continents, landforms, and subdivisions. Enough to build a country picker or label a map legend without a second asset library.

Every icon is a single SVG component. No sprite sheet to host and no font to load.

One import ships one icon

GeoIcons has no central registry and no <Icon name="us" /> string API. Each icon is its own named export, which is what lets bundlers drop everything you never reference:

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



export function Legend() {

  return (

    <ul>

      <li><Us aria-label="United States" /> United States</li>

      <li><Fr aria-label="France" /> France</li>

      <li><Jp aria-label="Japan" /> Japan</li>

    </ul>

  );

}

Import three icons and your build includes three icons. The other 419 never touch your bundle. For the mechanics behind that, read , or browse all 422 icons to find what you need.