Getting started

GeoIcons is a library of geography icons, country SVG maps, and state icons, ready to drop into your project. This guide walks you through installing the package and rendering your first icon.

Install GeoIcons

Install the package with npm:

npm install @geoicons/react

Render your first icon

Import an icon by its component name (PascalCase). Countries accept a full name like UnitedStates or the ISO 3166-1 code Us; areas use their place name. Render it like any component:

import { UnitedStates } from '@geoicons/react/countries';

export default function Example() {
  return <UnitedStates size={48} strokeWidth={1.5} className="text-blue-600" />;
}

The icon inherits color from currentColor, so it themes with your text by default.

Next steps

  • API: every prop a GeoIcon accepts.
  • Styling: weight, color, and fill.
  • Licensing: free under GPLv3, commercial license available.
  • React map icons: states, regions, runtime lookups, and Server Components.
  • SVG map icons: SVG, PNG, and Data URI downloads for design tools and plain HTML.