How to add country icons to a React app
Geography is a blind spot in most icon libraries. They give you arrows and carets, not the shape of Japan or the outline of the EU, and the geographic packs that exist rarely fit a modern React bundle. GeoIcons does: 799 country, area, and subdivision icons, each its own named export. Adding one to a React app takes three steps: install the package, import the icon by its ISO code, and render it:…
Geography can be a blind spot in most icon libraries. They provide standard symbols like arrows and carets, but not the shapes of countries or the outlines of regions. The GeoIcons library offers a solution: 799 icons representing countries, areas, and subdivisions, each with its own named export. Adding a GeoIcons icon to a React app involves three simple steps: install the package, import the icon using its ISO code, and render it.
The installation process is straightforward with npm i @geoicons/react. Importing is done by the ISO code, PascalCased, like import { UnitedStates, France, Japan } from '@geoicons/react/countries';. Rendering each icon is a straightforward React component with props for size, color, and accessibility. Size is set in pixels with the size prop, color follows the text color with currentColor, and weight is controlled by strokeWidth.
Accessibility is achieved by adding an aria-label for meaningful icons or using aria-hidden for purely decorative ones. For countries chosen at runtime, create a small map of the imported icons to keep the bundle tree-shakable, importing only the necessary icons at build time to prevent unnecessary code from being included.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
