# Fetching Country flags emojis from API in react

**URL:** <https://forum.kirupa.com/t/fetching-country-flags-emojis-from-api-in-react/650062>\
**Category:** web dev\
**Created:** [December 17, 2021, 8:33pm UTC](https://forum.kirupa.com/t/fetching-country-flags-emojis-from-api-in-react/650062 "2021-12-17T20:33:27Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![not\_survivng](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/not_survivng/32/16225_2.png) [@not\_survivng](https://forum.kirupa.com/u/not_survivng)\
**Post date:** [December 17, 2021, 8:33pm UTC](https://forum.kirupa.com/t/fetching-country-flags-emojis-from-api-in-react/650062/1 "2021-12-17T20:33:27Z")

</div>

I have a small piece of code from a weather App where it is supposed to look for any city’s weather after searching the name but also fetch the country flag of that city from this website [https://www.countryflags.io](https://www.countryflags.io) but it is down now.

I wonder if there is any alternatives to do this in my code?

```
   getWeather();
     return () => clearTimeout(loadingIndicatorTimeout);
  }, [location]);

const { flagIcon, countryCode } = React.useMemo(() => {
    return {
        flagIcon: weatherData.sys ? `https://www.countryflags.io/${weatherData.sys.country}/shiny/32.png` : "",
        countryCode: weatherData.sys ? weatherData.sys.country : "",
    };
}, [weatherData]);

return (
    <>
        <div className={classes.headerLine}>
            <Typography className={classes.location} variant="h5">
                {location}
            </Typography>
            {flagIcon && <img alt={countryCode} src={flagIcon} />}
        </div>
        <div className={classes.detailLine}>
            <LoadingIndicator isLoading={isLoading} />
            <ErrorMessage apiError={apiError} />
            <WeatherDisplay weatherData={weatherData} />
        </div>
    </>
);
```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 17, 2021, 9:12pm UTC](https://forum.kirupa.com/t/fetching-country-flags-emojis-from-api-in-react/650062/2 "2021-12-17T21:12:37Z")

</div>

Is the site down permanently or just a temporary glitch? The [countryflags.io](http://countryflags.io) service is the one that I know about the most, so it may be worth waiting for it to come back online 🙂

---

<div class="post-metadata">

**Author:** ![pepasteel](https://avatars.discourse-cdn.com/v4/letter/p/59ef9b/32.png) [@pepasteel](https://forum.kirupa.com/u/pepasteel)\
**Post date:** [December 30, 2021, 12:18am UTC](https://forum.kirupa.com/t/fetching-country-flags-emojis-from-api-in-react/650062/3 "2021-12-30T00:18:29Z")

</div>

There are several alternatives. My recommendation is to use [Country Flag Icons](https://gitlab.com/catamphetamine/country-flag-icons)  
It will fit your project perfectly.

In the case of your application, it would look like this:

```auto
flagIcon: weatherData.sys ? `https://catamphetamine.gitlab.io/country-flag-icons/3x2/${weatherData.sys.country}.svg` : "",

```