List of country flag icon projects

In this article, I will share a list of country flag resources for your project. Free and paid options. The list includes React-specific components that display country flags. I omitted projects that are just wrappers around other listed libraries. Wrappers tend to be outdated and not maintained.

If you are curious about how different country flags projects compare to each other, take a look at the country flags page, where we used 4 different libraries to display flags.

Flag-icons, SVG flags with CSS integration

Flag-icons project is a collection of all country flags in SVG, based on flags taken from Wikipedia. Flags are available in 2 formats: 4x3 and 1x1. The project offers a CSS integration, thus uses only two-letter ISO 3166-1 codes for country codes.

npm install flag-icons

import "node_modules/flag-icons/css/flag-icons.min.css";

The usage of the library is straightforward, and it looks as follows:

<span className="{`fi" fis fi-${countryCode}`} />

• Use the fi class to display a flag,
• use the fis class to display a flag in a square,
• and the fi-{COUNTRY_CODE} class to display a flag for a given country.

{COUNTRY_CODE} is always a two-letter country code (ISO 3166), for example pl for Poland. Letters are always lowercase. Below, you can see a list of all available country codes and their flags from the package.

Circle-flags, stylized country flags

Circle-flags is also a collection of country flags in SVG format. They are a great choice for displaying flags in a small space, but such feature comes with a price. These are not accurate representations of the flags, they are simplified and stylized to look good when viewed together. The project uses only two-letter ISO 3166-1 codes for country codes.

To use the flags, you can hotlink them from the project's GitHub page:

<img src="https://hatscripts.github.io/circle-flags/flags/br.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/pl.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/ua.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/us.svg" width="48">

or you can install the package using npm:

npm install --save https://github.com/HatScripts/circle-flags

There is also a React wrapper for this library: react-circle-flags. Circle-flags also offers a collection of language flags and locales.

FlagCDN, free CDN for country flags

FlagCDN is a free CDN for country flags. It is a great choice for displaying flags in a small space. The service offers a variety of flag sizes, and you can also use it to display flags in different formats, such as SVG, PNG, JPG, and WebP.

WorldData.info, retro GIF flags

WorldData.info offers a collection of 249 GIF flags that may fit best for retro stylized projects. They are available in 190x114 size. You can download them for €8 and use them in your project.

Emoji flags, unicode country flags

Emoji flags are a great way to display a country flag in a small space. They are also supported by most browsers and operating systems. You can use them in your project by simply copying and pasting the flag from the list below. Remember that emoji flags may not be supported by all browsers and operating systems, and they look different on different devices.

You can get a full list of emoji flags and country data using the following command:

curl https://cdn.simplelocalize.io/public/v1/countries

The JSON contains a list of countries with emoji flags in flag property.

React-world-flags, inline SVG flags

React-world-flags project is a React wrapper for Flag-icons, but here flags are rendered as inline SVGs, and it supports more country code formats. You can use the height prop to set the flag height and the code prop to set the flag code. It supports ISO 3166-1 codes as two-letter (Alpha-2), three-letter (Alpha-3) and three digit (numeric) country codes.

Installation

npm install react-world-flags

Usage

<Flag code="nor" height="16" />

// Output <img src="data:image/svg+xml..." height="16">

FlagKit, flags for iOS developers

FlagKit offers a collection of attractive flag icons that can be utilized in various applications and websites. Each flag is available in individual PNG and SVG files, and there is also an Asset Catalog and framework designed specifically for Apple platforms, making integration effortless.