Displaying Country Flags in React: react-country-flag vs react-flags

When you need to show country flags in a React app — maybe for language selectors, user profiles, or international shipping options — you might reach for a small utility package instead of managing SVGs or PNGs yourself. Both react-country-flag and react-flags aim to solve this by rendering flags as emoji, which are built into modern operating systems. But their current state, features, and maintainability differ significantly.

🚩 Flag Rendering Approach: Emoji-Based Simplicity

Both libraries use Unicode country flag emojis, which means they don’t ship any image assets. Instead, they convert a country code (like "US") into the corresponding emoji sequence (🇺🇸). This keeps the bundle tiny and avoids extra HTTP requests.

react-country-flag does this reliably and safely:

import ReactCountryFlag from "react-country-flag";

function App() {
  return <ReactCountryFlag countryCode="US" />;
}

react-flags uses a similar approach but with fewer safeguards:

import Flag from "react-flags";

function App() {
  return <Flag code="US" />;
}

⚠️ Note: Emoji rendering depends on the user’s OS and browser. On older systems or certain platforms (like Linux without emoji fonts), flags may appear as letters (e.g., "US") instead of the flag graphic. Neither package can fix this — it’s a platform limitation.

🔤 Country Code Support: Flexibility vs Rigidity

react-country-flag supports both 2-letter ("US") and 3-letter ("USA") ISO codes. It automatically normalizes input and handles invalid codes gracefully by rendering nothing (or a placeholder if configured).

// Works with 2-letter
<ReactCountryFlag countryCode="FR" />

// Also works with 3-letter
<ReactCountryFlag countryCode="DEU" />

react-flags only accepts 2-letter codes and throws no warnings for invalid inputs. If you pass "USA", it renders nothing silently. There’s no validation or conversion logic.

// Only 2-letter works
<Flag code="JP" />

// This fails silently
<Flag code="JPN" />

♿ Accessibility: Built-In vs Missing

react-country-flag includes accessibility attributes by default. You can set alt, title, and aria-label to help screen readers and improve SEO:

<ReactCountryFlag 
  countryCode="CA" 
  alt="Canada" 
  title="Canada" 
  aria-label="Flag of Canada" 
/>

react-flags renders a plain <span> with no accessibility props. You’d have to wrap it yourself or add attributes manually, which defeats the purpose of using a dedicated component.

// No built-in accessibility
<Flag code="BR" />
// Renders: <span>🇧🇷</span>

🛠️ Maintenance Status: Active vs Deprecated

This is the most critical difference.

react-country-flag is actively maintained. It includes TypeScript definitions, follows semantic versioning, and accepts bug fixes and improvements. The API is stable and well-documented.

react-flags is deprecated. Its npm page and GitHub repository show no updates in over five years. There are open issues about missing features and bugs that will never be addressed. Using it introduces technical debt and potential breakage in future React versions.

📦 Developer Experience: Type Safety and Clarity

react-country-flag ships with full TypeScript support. Your IDE will autocomplete props and validate country codes at compile time:

// TypeScript knows these props
<ReactCountryFlag countryCode="MX" style={{ fontSize: '2rem' }} />

react-flags has no type definitions. You’ll get no IntelliSense, and errors only surface at runtime — if at all.

✅ Recommendation for New Projects

Use react-country-flag. It’s the only sensible choice for production applications today. It’s lightweight, accessible, flexible with country codes, and actively supported.

Do not use react-flags in new codebases. Its deprecated status, lack of accessibility, and rigid input requirements make it a liability.

💡 When You Might Skip Both

If your app only needs a handful of flags and you control the design system, consider using inline emoji directly:

<span role="img" aria-label="United States">🇺🇸</span>

This avoids dependencies entirely. But once you need dynamic country codes, validation, or consistent accessibility, react-country-flag becomes worth the minimal install.