⚡ Nirazan Basnet ⚡ for YoungInnovations

Posted on Apr 9, 2021 • Updated on Mar 16, 2022

Get Instant Country Flags

#react #javascript #webdev

While working on one of my projects, there is one feature where I need to display a specific flag depending upon the country code.

My first approach was to get the country flags' zip file and extract it locally from the images folder.
You can download the list of country flags from here.

I thought this can be easy. Then, I thought as the project was on ReactJs, I wonder there might be an API for the country flags.

Then I came across,
Country Flags - A simple API to load any country flags

So, how does it work:

HTML

<img src="https://flagcdn.com/:size/:country_code.png">

Example

<img src="https://flagcdn.com/48x36/za.png">

Simple Data Map Syntax in ReactJs

Code:

function CountryList() {
  const countries_code = ["au", "af", "bd", "br", "in"];

  return (
    <div className="country-list">
      <ul>
        {countries_code.map((code, index) => (
          <li key={index} className="mr-16">
            <img src={`https://flagcdn.com/48x36/${code}.png`} alt="..." />
          </li>
        ))}
      </ul>
    </div>
  );
}
);

You can check out the demo link here

Conclusion
👏👏 By coming this far I hope you can implement this awesome country flag CDN & API on your project. So, I suggest you give it a try on your project and enjoy it!

Feel free to share your thoughts and opinions and leave me a comment if you have any problems or questions.

Till then,
Keep on Hacking, Cheers

Top comments (22)

Jon Randy 🎖️ • Apr 9 '21 • Edited

const getFlagEmoji = countryCode=>String.fromCodePoint(...[...countryCode.toUpperCase()].map(x=>0x1f1a5+x.charCodeAt()))

getFlagEmoji('GB') // 🇬🇧
getFlagEmoji('JP') // 🇯🇵
getFlagEmoji('ZA') // 🇿🇦

Arun Murugan • Apr 9 '21

This is Awesome!

⚡ Nirazan Basnet ⚡ • Apr 10 '21

Thanks!!

Daniel Simão • Apr 10 '21

🤣🤣🤣🤣🤣🤣

Kasper Mróz • Apr 9 '21

Love it! 🔥

⚡ Nirazan Basnet ⚡ • Apr 10 '21

Thanks!!

⚡ Nirazan Basnet ⚡ • Apr 9 '21

Great.

David Krmela • Apr 16 '21

Hi Nirazan, you mentioned Flagpedia.net as a place where you can download the archive with flags. But it also supports API access:

flagpedia.net/download/api

Examples:

flagcdn.com/w160/gb.png (standard – fixed width, variable height)
flagcdn.com/h120/gb.png (standard – fixed height, variable width)
flagcdn.com/160x120/gb.png (waving – fixed width and height)

There are a lot of different resolution. Maybe someone will find it useful.

⚡ Nirazan Basnet ⚡ • Mar 16 '22

Thanks for the information :)

Jeremy Persing • Dec 21 '21

Hey, I was working on a project recently and used your post to implement flags into the project. Unfortunately, half way through the project countryflags.io went down. Because of this, I decided to make my own API, countryflagsapi.com. The API allows you to get a country by it's two letter code (ISO Alpha-2 code), along with the country's name, it's three letter code (ISO Alpha-3 code), or UN code. Thanks for the post Nirazan, and hopefully this API can help anyone that's run into trouble with countryflags.io being down.