{
  "id": 4623497,
  "title": "How to add country icons to a React app",
  "url": "https://urgent.news/2026/08/31/how-to-add-country-icons-to-a-react-app",
  "topic": "tech",
  "section": "Tech",
  "published": "2026-08-31T10:09:16.000Z",
  "source": {
    "name": "Dev.to",
    "slug": "dev-to",
    "url": "https://dev.to/rushan123/how-to-add-country-icons-to-a-react-app-185"
  },
  "original_language": "en",
  "account": "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.",
  "summary": "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:…",
  "key_points": [],
  "editors_take": null,
  "illustration": null,
  "coverage": {
    "outlets": 2,
    "also_reported_by": [
      {
        "outlet": "Dev.to",
        "title": "SVG icons in React Server Components: what ships to the client",
        "url": "https://urgent.news/2026/08/31/svg-icons-in-react-server-components-what-ships-to-the-client",
        "published": "2026-08-31T10:07:54.000Z"
      }
    ]
  },
  "ai_generated": true,
  "disclaimer": "Summaries, key points and the editor’s take are written by software from other outlets’ reporting and may contain errors — always check the linked original."
}