Translation Editor
Save time on handling localization files and translation strings.
Try SimpleLocalize
Share article

List of country flag icon projects

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.

Country flag projects comparison

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.

flag icons project

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.

circle-flags project

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

<img src="" width="48">
<img src="" width="48">
<img src="" width="48">
<img src="" width="48">

or you can install the package using npm:

npm install --save

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.

FlagCDN project, retro GIF flags 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.

WorldData retro GIF flags

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.

Emoji flags

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


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.

React World Flags


npm install react-world-flags


<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.

Flags by FlagKit for iOS developers

Relevant posts

Check out our latest blog posts and stay up to date with SimpleLocalize

Hosted country flags

Jakub Pomykałaby3 min read

Simplify flag management and learn how to keep country flags in sync in your software project with SimpleLocalize.

Continue reading

UI Design: Language selectors

Kinga Wojciechowskaby5 min readFebruary 09, 2024

A great language selector can highly improve user experience, and it's an essential setting in a multilingual website. Check our selection of the most beautiful language selectors.

Continue reading