Introduction
National Flags and Country Flag Icons for Design and Development
Country flag icons are scalable versions of national flags that help users recognize a country at a glance. This collection includes 250+ flags of the world with country names, ISO codes, and calling codes, so every flag image is easy to search, find, and use.
The collection works for both design and development. Designers can download SVG and PNG flag images for Figma or any design tool. React developers can install the npm package and drop the flag components straight into their apps.
Unlike flag emojis, which look different across operating systems and don't render on some Windows browsers, these flag icons look identical everywhere.
Use cases
How to Use Country Flags in Maps, Selectors, and Apps
Country flag icons are a familiar visual in products with a global audience. Use them in country pickers, travel apps, dashboards, and regional settings to help users spot a country quickly and make international experiences feel more intuitive.
- Country selectors – Help users pick their country in forms, onboarding, shipping addresses, and phone number inputs.
- Maps & analytics – Use flags for maps, dashboards, rankings, and country-based analytics so users don't have to decode location data.
- E-commerce & payments – Show shipping destinations, supported markets, currencies, and payment methods.
- Travel & booking – Display destinations, routes, and participating countries in travel experiences.
- User profiles – Show a user's country or region in profiles, directories, and member lists.
- Sports & global events – Help users quickly identify countries competing in tournaments and global events.
- VPN & server selection – Let users choose server locations for faster, more reliable connections.
- Regional settings – Represent a user's country or region in locale, currency, and preference settings. Pair the flag with a language name if you're using it near language options, since a flag shows a country, not a language.
Design
Best Design Practices for Country Flag Icons and Images
Use the SVG and PNG flag assets in Figma, Sketch, Adobe tools, and presentations. Whatever tool you pick, keep the flag design recognizable, visually consistent, and paired with a country label when the context isn't obvious.
- Choose one flag style – Stick to a consistent flag style, either flat or rounded across your interface.
- Keep flags recognizable – Don't crop, stretch, or add heavy effects that hide a flag's colors and pattern.
- Use appropriate sizes – Pick sizes that stay clear in lists, cards, and tables without overpowering the content around them.
- Maintain equal visual weight – Use consistent dimensions and spacing so flags look balanced whatever their aspect ratio.
- Respect official designs – Use accurate, up-to-date flag designs so each country is represented correctly.
- Consider accessibility – Don't rely on flags alone. Add country names or labels, and set alt text or an aria-label on each flag.
- Handle special territories thoughtfully – Decide how you'll represent territories and disputed regions, and apply that approach consistently across your product.
- Add a subtle border to light flags – Flags with a lot of white, like Japan or Finland, can disappear on white backgrounds. A thin border keeps the edges visible in both light and dark mode.
Development
Best Development Practices for Country Flag Components and Assets
For React, install the @radianui/flags npm package and use the flag components directly in your app. Using another framework? Download the SVG or PNG flag icons and use them as regular assets. Either way, standardized country codes, optimized files, and accessible labels keep your implementation reliable.
- Map flags from ISO country codes – Use ISO 3166-1 alpha-2 codes (like NP, IT, US) as the single source of truth so assets and mappings never drift apart.
- Load only what you need – Import only the countries you use or lazy-load flags on demand, and reuse one shared set of assets to keep bundle size down.
- Support multiple formats and sources – Work with SVG, PNG, or CDN-hosted assets, and let developers swap between local files, a CDN, or a custom flag library without changing the component.
- Separate data from presentation – Keep country names, ISO codes, dialing codes, and regions in structured data instead of hardcoding them. That way geopolitical changes only touch the data, not the component API.
- Validate country inputs – Check codes before rendering, and fall back to the country name or a placeholder for unknown codes so users never see a broken image.
- Label flags for screen readers – Use
alt="Flag of Italy"or an aria-label. If the country name is already shown next to the flag, use an empty alt so it isn't announced twice.
FAQ
Country Flags FAQ: Icons, SVG, PNG, and Emojis
Everything you need to know before adding these assets to your design or application.