Why does my SVG map icon show up black?

The icon strokes with currentColor, which only inherits a color when the SVG is inline in your HTML. Inside an img tag or a design tool it falls back to black. Pick a color in the icon studio before downloading, paste the SVG inline, or use the Data URI as a CSS mask with background-color.

Can I edit the country outline SVG in Figma?

Yes. Drag the downloaded SVG onto a Figma canvas and it becomes an editable vector with a live stroke, so you can change its color, stroke weight, and fill.

How large can I use a GeoIcons SVG?

The file scales to any size without blurring, but the outline is simplified for icon sizes of roughly 16 to 64 pixels. It works well up to the 512px PNG export. For posters or printed maps, use detailed cartographic data instead.

SVG map icons and country outlines

Every GeoIcons shape is also a plain SVG file. If you design in Figma, write HTML by hand, or just need an outline of Nepal for a slide, open the icon's page, pick a stroke weight and color, and download it. You don't need to install anything or create an account.

Demo

Download formats

Each icon page, such as Australia or California, has a studio where you adjust the icon before you export it:

SVG. The file keeps the color, stroke weight, and fill you picked, so it looks the same when you open it anywhere else.
PNG at 128, 256, or 512 pixels. Use these for slides, documents, and tools that don't accept vectors.
Data URI. Copy the icon as a single string you can paste into CSS or an <img src>.

What's inside each SVG

Every icon uses the same structure: a 24×24 viewBox, outline paths, and styling you can override. Here is a typical file, with the path data shortened:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" stroke="currentColor" fill="none">
  <path stroke-linejoin="round" d="…" />
</svg>

Because all 799 icons share that 24×24 grid, a row of countries lines up without manual nudging, and they sit comfortably next to the 24px icons from sets like Lucide or Heroicons.

Use the SVG in Figma, Sketch, or Illustrator

Drag the downloaded file onto your canvas. It arrives as an editable vector with a live stroke, so you can still change the color and stroke weight in your design tool. If you scale the icon up and want the outline to stay thin, turn off stroke scaling (in Figma, uncheck Scale strokes & effects when resizing).

When your developers build the design, they can install the same icons as React components or use the Vue, Angular, or vanilla JavaScript packages. The shapes in the design file and in production are identical.

Use the SVG on a web page

How you add the SVG decides whether it can pick up your text color.

Inline <svg> inherits currentColor from the surrounding text. Paste the markup into your HTML, and the outline turns whatever color its parent is.

An <img> tag can't see your page's CSS. An icon with stroke="currentColor" falls back to black inside an <img>. Pick the color in the studio before downloading, or use the CSS mask technique below.

A CSS mask lets you color an external SVG with background-color. Copy the Data URI from the icon page and use it as the mask image:

.icon-kenya {
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: url('data:image/svg+xml,...') no-repeat center / contain;
  mask: url('data:image/svg+xml,...') no-repeat center / contain;
}

The mask takes the icon's shape and background-color paints it, so the icon follows your text color and hover states like any other element.

Load icons with JavaScript, no framework needed

If your site has a build step but no framework, @geoicons/vanilla swaps placeholders for inline SVG. Register only the icons you use so the rest stay out of your bundle:

<i data-geoicon="ke" aria-label="Kenya"></i>
<i data-geoicon="us-california" aria-label="California"></i>

import { createGeoIcons } from '@geoicons/vanilla';
import { Kenya } from '@geoicons/vanilla/countries';
import { UsCalifornia } from '@geoicons/vanilla/subdivisions';

createGeoIcons({ ke: Kenya, 'us-california': UsCalifornia });

The vanilla API docs cover styling with plain CSS and re-running the scan after you add new elements.

Built for icon sizes, not wall maps

GeoIcons simplifies each coastline and border so the shape reads clearly at 16 to 64 pixels. The SVG scales to any size without blurring, but it won't gain detail as it grows. For a printable map, a poster, or anything where the exact coastline matters, start from a cartographic data source such as Natural Earth instead.

What you can download

255 countries and territories in the countries catalog.
167 regions, including continents, the European Union, the Sahara, and US regions like New England, in the areas catalog.
377 states, provinces, and parishes across 23 countries, including all 50 US states, in the subdivisions catalog.

FAQ

Why does my SVG map icon show up black?: The icon strokes with currentColor, which only inherits a color when the SVG is inline in your HTML. Inside an img tag or a design tool it falls back to black. Pick a color in the icon studio before downloading, paste the SVG inline, or use the Data URI as a CSS mask with background-color.
Can I edit the country outline SVG in Figma?: Yes. Drag the downloaded SVG onto a Figma canvas and it becomes an editable vector with a live stroke, so you can change its color, stroke weight, and fill.
How large can I use a GeoIcons SVG?: The file scales to any size without blurring, but the outline is simplified for icon sizes of roughly 16 to 64 pixels. It works well up to the 512px PNG export. For posters or printed maps, use detailed cartographic data instead.

Browse and download icons