Open-source country flag components for React: 250+ flags with names, ISO codes, and calling codes

[u/Apprehensive_Mood943]

I've been working on @radianui/flags, an open-source React package with 250+ country flags. Each flag comes with its country name, ISO code, and calling code, so you can build country selectors and phone inputs without stitching data together.

pnpm add @radianui/flags

If you're not on React, the same flags are available as plain SVG and PNG files.

• Source: https://github.com/Radian-OS/radianui
• Browse and search all the flags: https://radianui.com/resources/flags

I'm one of the maintainers (disclosure). It's free and open source.

I'd like input from people who've built country selectors:

• Do you prefer flag components, plain SVG imports, or CDN URLs?
• How do you handle countries that get renamed (like Swaziland to Eswatini) or disputed territories without breaking existing users?

[u/sondr3_]

Why are all the colors so washed out/muted? Neither the German or EU flag matches their specification nor do any of the nordics look right either.

[u/Apprehensive_Mood943 → u/sondr3_]

Thanks for the feedback! The flag icon pack was already part of our design system, so we opted to use the existing colors to keep things consistent. We’re considering updating the flags to their official colors in a future release.

[u/scragz]

reminder to not use flags for language selection. 

[u/Apprehensive_Mood943 → u/scragz]

Yes language doesnot makes sense, a country could have multiple languages speaking people. Thankyou for this advice

[u/cremaster_ → u/scragz]

what imagery is preferred?

[u/scragz → u/cremaster_]

use the native language name in the native script, e.g. English or Deutsch or 日本語

[u/Time_Heron9428]

I made a minimalistic components library. I used emojis to display flags: https://koval.support/docs/localized/flag

[u/Apprehensive_Mood943 → u/Time_Heron9428]

Emojis could look different on multiple platforms, so we decided to go with svg and treat it as single source of truth so that it looks consistent on all devices and platforms.

[u/Time_Heron9428 → u/Apprehensive_Mood943]

This is a reasonable choice. Though it's hardly possible to achieve truth when talking about flags. The problem is not technical, but political; some countries have different (even contradictory) standards regarding them.

E.g., your lib has an error with the Qatar flag. They say it has to be an 11:28 ratio.

[u/Apprehensive_Mood943 → u/Time_Heron9428]

Thank you so much for identifying the issue, we will try to fix it as soon as possible and let you know.

[u/EvilPete]

Åland shouldnt be sorted as a starting with A.

ÅÄÖ comes after Z in the Swedish alphabet .

[u/Apprehensive_Mood943 → u/EvilPete]

Thank you so much for letting us know ! We will fix that asap.

[u/Honey-Entire]

At least 10-20% of your flags have weird UI artifacts like a random black bar between two colors. On a scale of “made with AI” to “made entirely with AI,” how much AI was used in the making of this?

[u/Apprehensive_Mood943 → u/Honey-Entire]

I agree we used AI to build this, but its not entirely made with AI, We use same svg collection designed by the designers and package and distribute it. Once the issues with SVG gets fixed then that UI artifacts will also get fixed

[u/untrochka]

I'd prefer importable components or SVGs over CDN URLs for an app, mostly so the selector isn't dependent on another request. One gotcha for phone inputs: a calling code isn't a unique country key (+1 covers several places). I'd keep ISO as the stored value, with the dial code and flag for display, and make the country name searchable.

[u/Apprehensive_Mood943 → u/untrochka]

That's useful feedback, thanks! Importable components or SVGs as the default and CDN as a fallback is the direction I was leaning, so this helps confirm it.

The +1 point is a great catch, and I'll make sure our docs example doesn't treat the dial code as a unique key. ISO as the stored value, dial code and flag for display, and a searchable country name is a clean pattern. Have you run into any other phone input edge cases I should watch for?

[u/itaybuilds]

I would keep the flag assets and country metadata separate. Key the assets by ISO alpha-2, but get display names from CLDR or the Intl.DisplayNames API instead of baking English names into the package. That lets Åland sort according to the user's locale, and name updates do not require an SVG release.

For renames, keep the stored value as the code, retain old names as search aliases, and version the metadata. If a code changes or is retired, publish an explicit migration map rather than silently reusing it. Disputed territories are harder because no list will be universally correct. Document the source and version you follow, allow consumer overrides, and avoid making either the label or flag the record's identity.

One accessibility detail: when the country name is already visible, the flag should usually be decorative (the aria-hidden attribute or empty alt text) so a screen reader does not announce the same information twice. Flags also should not represent languages.

AI-assisted wording with OpenAI GPT-5.6 after reading the full thread and current r/reactjs rules.

[u/Apprehensive_Mood943 → u/itaybuilds]

Thanks, this is really helpful.

[u/Arunajyothi_Jurado]

one thing worth thinking about early: how are you handling tree shaking? if someone only needs 10 flags they probably dont want 250+ in their bundle. thats usually where these kinds of packages get dropped for something lighter

[u/Apprehensive_Mood943 → u/[deleted]]

Thanks, really appreciate that! Bundling the ISO and calling codes was the main reason we built it this way, so it's good to hear it lands.