DEV Community

loading...
Cover image for Get Instant Country Flags
YoungInnovations

Get Instant Country Flags

nirazanbasnet profile image Nirazan Basnet ・2 min read

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://www.countryflags.io/:country_code/:style/:size.png">
Enter fullscreen mode Exit fullscreen mode

Example

<img src="https://www.countryflags.io/be/flat/64.png">
<img src="https://www.countryflags.io/be/shiny/64.png">
Enter fullscreen mode Exit fullscreen mode

Themes

Currently, they have two themes - flat and shiny

Sizes

Supported sizes are :
**16 for 16px wide flags
**24 for 24px wide flags
**32 for 32px wide flags
**48 for 48px wide flags
**64 for 64px wide


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((country_code, index) => (
          <li key={index}>
            <img
              src={`https://www.countryflags.io/${country_code}/flat/64.png`}
              alt="..."
            />
          </li>
        ))}
      </ul>
    </div>
  );
}
);
Enter fullscreen mode Exit fullscreen mode

You can check out the demo link here


Conclusion
👏👏 By coming this far I hope you can implement this awesome country flag 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

Discussion (15)

pic
Editor guide
Collapse
jonrandy profile image
Jon Randy • Edited
const getFlagEmoji = countryCode=>String.fromCodePoint(...[...countryCode.toUpperCase()].map(x=>0x1f1a5+x.charCodeAt()))

getFlagEmoji('GB') // 🇬🇧
getFlagEmoji('JP') // 🇯🇵
getFlagEmoji('ZA') // 🇿🇦
Enter fullscreen mode Exit fullscreen mode
Collapse
lukeshiru profile image
△ LUKE知る

I thought the post would be what's on this comment 🤣

Collapse
arunmurugan78 profile image
Arun Murugan

This is Awesome!

Collapse
nirazanbasnet profile image
Collapse
kaspermroz profile image
Kasper Mróz

Love it! 🔥

Collapse
nirazanbasnet profile image
Collapse
simaodeveloper profile image
Daniel Simão

🤣🤣🤣🤣🤣🤣

Collapse
nirazanbasnet profile image
Collapse
davidkrmela profile image
David Krmela

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

Examples:

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

Collapse
shriji profile image
Shriji

Very neat! I made the svelte version of this!

Collapse
nirazanbasnet profile image
Nirazan Basnet Author

Great 🙂🙂

Collapse
jorik profile image
Jorik

Great written article! Inspired by your piece, I wrote a small function to achieve this using emoji's! dev.to/jorik/country-code-to-flag-...

Collapse
nirazanbasnet profile image
Collapse
tuliocalil profile image
Tulio Calil

🇧🇷

Collapse
hgpit profile image
hgpit

Did something happen to this domain? it's been down for at least 2 days now :(