iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
To display a free country flag in a React project, choose a React component, a CSS/SVG asset library, or an externally hosted image. The right option depends on your existing country-code format, whether you want assets in your app bundle, how the flag should be labeled for assistive technology, and whether an external service is acceptable.
How do I display a country flag in React?
Start with the country-code values already used by your app, then choose a renderer that accepts them or convert them once at the data boundary. For example, flag-icons uses ISO 3166-1 alpha-2 codes in CSS class names, while react-world-flags documents support for alpha-2, alpha-3, and numeric codes.
For a component API with embedded SVG, svg-flags documents a <Flag> component. For a React wrapper with a choice of emoji or SVG, consider react-country-flag. If you prefer CSS classes or want to include a selected subset, see flag-icons.
Compare free country-flag options
| Option | Useful when | Codes and delivery | Considerations |
|---|---|---|---|
| svg-flags | You want a React component that renders SVG. | README shows <Flag country="us" width={32} /> and describes embedded SVG. |
Project README claims 224 country and territory flags and documents fallbacks, alt text, and an MIT license. The count is the maintainer’s figure, not an independent audit. |
| react-country-flag | You want to choose emoji or SVG rendering in a React wrapper. | README examples use a country code and allow styling to be passed through. | Its README says callers must supply title or aria-label following the v2 change. The repository states MIT licensing. |
| react-world-flags | Your source data may use different country-code formats. | README documents alpha-2, alpha-3, and numeric codes, plus a fallback. | The repository says all flags are included and the bundle is about 1.3 MB gzipped. This is the project’s stated figure, not a measurement of every app. It also points to a v2 beta; check current version status and package details. |
| flag-icons | You prefer CSS classes, Sass customization, or a stylesheet. | Uses .fi and .fi-xx classes with ISO alpha-2 codes. Sass configuration can include selected countries. |
You must set the element dimensions to suit the asset’s proportions. Its README describes 4:3 and square presentations. |
| react-flag-icon-css | Your project already uses CSS modules or regular CSS with a React wrapper. | README provides a factory to bind the app’s React instance and examples for both CSS approaches. | The examples use webpack-era configuration, so verify compatibility with your current React and build setup. The repository states MIT licensing. |
| country-flag-icons | You want standalone SVG files, CSS classes, or individual React exports. | The npm listing describes 3:2 SVGs and React exports; it says typical flags are around 1 KB. | Confirm current exports, release details, and licensing before adopting; package details can change. |
| Free Flags CDN | You want to use an image URL without adding flag assets to the app bundle. | Vendor documentation shows React <img> examples and PNG and SVG options. |
The vendor says no API key is needed and use is free for personal and commercial purposes. That is a vendor claim; verify service terms and availability before relying on it. |
Choose between a component, CSS assets and a hosted image
Use a React component for a component-style API
A component is convenient when flags are part of your React markup and you want to pass a country code and dimensions directly. The svg-flags README describes embedded SVG rendering and an optional legacy setup that copies assets into public/flags. react-country-flag offers emoji and SVG modes; emoji may render differently across operating systems and browsers, so check the platforms your users rely on.
#1 Best Overall
Use CSS when you want to control which assets are included
flag-icons can be used with CSS classes or configured through Sass to include selected countries. Its README explains that the background flag appears within an element, so you need to size that element deliberately; the documented examples use 4:3 or square proportions. A stylesheet delivered from a CDN keeps those assets outside your app bundle, but adds an external dependency.
Use a CDN image when an external request is acceptable
The Free Flags CDN documents React image examples and PNG and SVG variants. A remotely hosted image does not add its file to your app bundle, but it depends on the provider being available and on your privacy and content-security policies allowing the request. Consider self-hosting assets if those external dependencies do not suit your deployment.
Normalize codes and set dimensions
Country-code conventions vary between libraries. Make the conversion once, near the boundary where your app receives or stores country data, rather than scattering special cases across components. Handle missing or unsupported values with a visible fallback when the chosen package provides one; react-world-flags documents fallback support.
Recommended Free Tools
For flag-icons, the class suffix is an ISO alpha-2 code, such as us. Add the package’s CSS or its documented stylesheet, use the base and country classes, and set width and height to match the chosen aspect ratio. If you use a component or image, provide dimensions appropriate to the asset rather than assuming all flags share the same shape.
The flag-icons Sass variables are available for tailoring which flags are included. The project README also demonstrates a version-pinned stylesheet URL using version 7.3.2; treat that as its documented example, not a guarantee that this is the latest release. Check the package documentation for the version you select.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Make the flag accessible in context
Decide whether the flag adds information or merely decorates a country name already shown next to it. If it communicates which country a value represents, expose that country name to assistive technology. If adjacent text already names the country, avoid repeating the same name in the accessible label.
This matters especially with react-country-flag: its README says that, after the v2 change, title and aria-label are no longer supplied by default and are the developer’s responsibility. Check the selected component’s current documentation for its own accessible-name behavior.
Quick Recap
Best Value
Check bundle, licensing and compatibility before adopting
- Bundle impact: The react-world-flags README states that all flags are included and puts the bundle at about 1.3 MB gzipped. That figure applies to that project’s stated bundle, not to all flag libraries. For other packages, inspect their exports and your production build rather than relying on a general description such as “lightweight.”
- License: The svg-flags, react-country-flag, and react-flag-icon-css repositories state MIT licenses. That does not establish that every upstream artwork set or copied asset has identical terms. Check the license and notices for the specific installed version and its assets.
- Hosted-service terms: Free Flags CDN’s personal and commercial use statement describes its service. Review the provider’s current terms and decide whether an outside host meets your reliability, privacy, and content-security-policy requirements.
- Version and build compatibility: Package versions, maintenance, exports, and React or bundler compatibility can change. The country-flag-icons npm listing describes its assets and exports, but verify current package details and license before depending on them. Check the selected library’s current release and test it in your own build.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
