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: the ISO 3166-1 code for countries, the place name for areas) and render it like any component:

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

export default function Example() {
  return <Us 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.