Flags
Country flags for compact country metadata and pickers.
In product
Flag from @/components/ui/flag. Default is 20×15; phone pickers use 24×16. Click to copy the ISO code.
Library
Live catalog from react-phone-number-input/flags (265 countries). Updating the package updates this grid.
Best practices
When to use
- Use a Flag beside a country name, ISO code, or dialing code when the country needs fast visual recognition.
- Do not use a flag as the only label for a country selection.
Behavior
- Default size is 20×15 for dense rows. Phone pickers use 24×16 via className.
- The library grid reads react-phone-number-input/flags, so pnpm update react-phone-number-input refreshes the catalog.
Content
- Copy the ISO 3166-1 alpha-2 code from this page when wiring Flag country props.
Accessibility
- Pair the flag with readable country text or an accessible name; flags are not universally understood as labels.