Icon types

Every GeoIcon belongs to one of three categories. Each category has its own naming scheme, its own international standard (or none, on purpose), and its own import path. This page explains what each one contains, how the icons are named, what ships today, what is planned, and how to find and copy an icon into your project.

Every icon is a map-shape outline of the place it represents, drawn to a single visual system so the whole set reads as one family.

Countries & territories

The default set: sovereign states and dependent territories, keyed to ISO 3166-1 alpha-2. It also carries a handful of mainland and constituent-country variants where a single code would otherwise hide real geography.

The component name is the country's two-letter code in PascalCase.

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

<Us size={48} />

Those two letters are hard to recall for less-known countries, so every country also exports its full name as an alias. Us and UnitedStates are the same component, as are Bt and Bhutan. Import whichever reads better at the call site; both tree-shake to a single icon.

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

<UnitedStates size={48} />
<Bhutan size={48} />

Areas

Areas are the groupings that no single standard covers: continents and subregions, economic and political blocs, and physical geography like peninsulas, deserts, and basins. There is deliberately no ISO code here; these are editorial groupings, so they are named by their place name in PascalCase.

import { Europe, Scandinavia } from '@geoicons/react/areas';

<Europe size={48} />
<Scandinavia size={48} />

Where a name would be ambiguous on its own, the code disambiguates it. The European Union ships as EuropeanUnion, not Eu, so it never collides with a country or another bloc.

Subdivisions

Subdivisions are a country's first-level administrative divisions, the ADM1 tier, which different countries call states, provinces, parishes, or departments. They are coded to ISO 3166-2, the standard that extends a country's ISO code down to its subdivisions.

The component name is the parent country's alpha-2 code plus the subdivision name, both in PascalCase:

import { UsTexas, CaQuebec, MxJalisco } from '@geoicons/react/subdivisions';

<UsTexas size={48} />
<CaQuebec size={48} />
<MxJalisco size={48} />

What ships today

Subdivision coverage currently spans North America: 23 countries, from the United States and Canada down through Mexico, Central America, and the Caribbean:

Antigua and Barbuda, Bahamas, Barbados, Belize, Canada, Costa Rica, Cuba, Dominica, Dominican Republic, El Salvador, Grenada, Guatemala, Haiti, Honduras, Jamaica, Mexico, Nicaragua, Panama, Saint Kitts and Nevis, Saint Lucia, Saint Vincent and the Grenadines, Trinidad and Tobago, and the United States.

What is planned

The rest of the world is being drawn now, continent by continent (South America, Europe, Asia, Africa, and Oceania), and will land in upcoming releases. Countries & territories and areas are already worldwide; subdivisions are the category still filling in.

Naming at a glance

Every icon is its own named export, so your bundler tree-shakes away everything you do not import. There is no central registry and no <Icon name="us" /> lookup. You import exactly the shapes you use.

Finding and copying icons

The icon catalog is the fastest way to discover an icon and copy it into your project.

Search. The search box at the top of the catalog matches across every category at once and is fuzzy, so small typos still land. It searches three things:

• the display name (Texas, European Union),
• the code (a country's alpha-2, or a subdivision's ISO 3166-2 like US-TX),
• and alternate terms, including the parent country, so yukon surfaces Canada and a subdivision search can be narrowed by its country.

Results are grouped by category, so you can see at a glance whether a match is a country, an area, or a subdivision.

Browse. Use the top tabs to switch between Countries & territories, Areas, and Subdivisions. Within subdivisions, the country filter narrows the grid to one parent.

Copy. Click any icon to open its panel. There you can:

• copy a ready-to-paste import snippet for React, Vue, Angular, or Vanilla JS, reflecting the weight and fill you have set,
• copy the raw SVG, or
• download the SVG or PNG file.

FAQ

How many icons are there, and how are they split?

GeoIcons ships 799 icons: 255 countries and territories, 167 areas, and 377 subdivisions.

What international standards does GeoIcons follow?

Countries and territories follow ISO 3166-1 alpha-2. Subdivisions follow ISO 3166-2 (the ADM1 tier). Areas follow no standard by design, because continents, blocs, and landforms are editorial groupings with no code to cite.

Why is a subdivision imported as UsTexas instead of its ISO 3166-2 code?

For 11 Caribbean countries ISO 3166-2 is numeric (for example JM-01), which would produce unreadable component names like Jm01. Subdivisions are keyed by parent country plus name instead, and the ISO 3166-2 code is kept as searchable metadata.

Which countries have subdivisions today?

Coverage currently spans North America: 23 countries including the United States, Canada, Mexico, Central America, and the Caribbean. Other continents are in progress and will ship in upcoming releases.

Can I import a country by its full name instead of its ISO code?

Yes. Every country exports its full name as an alias next to the ISO one, so UnitedStates and Us are the same component, as are Bhutan and Bt. Import whichever reads better; both tree-shake to a single icon. The four UK constituents (England, Scotland, Wales, Northern Ireland) already ship under their names.

Are GeoIcons flags?

No. Every icon is a map-shape outline of the place: the geographic silhouette, not a flag.

Next steps

• Getting started: install the package and render your first icon.
• API: every prop a GeoIcon accepts.
• Styling: weight, color, and fill.
• Browse the catalog: search and copy any icon.