Getting started

GeoIcons is a library of geographic map 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.