Country Flags

Overview

Country Flags is a set of 250+ flags covering every UN member state, dependency, and recognized territory, each drawn in the same clean circular format. In Figma every flag is named by its ISO 3166-1 alpha-2 code (US, TR, DE). In React, the flags ship in @create-ui/assets, and the Country Flag component renders one straight from its ISO code, as in CountryFlag with code TR.

When should you use them?

Use flags for phone number prefixes, country and region selectors, shipping forms, currency pickers, and language switchers. Phone Input and Country Flag use them out of the box. A language is not a country, so pair the flag with the language name in language pickers.

How should you use them?

• Render flags from ISO codes with the Country Flag component, so the code you store is the code you display.
• Always show the country or region name next to the flag, since many flags look alike at small sizes.
• Keep flags at one size inside a list; the circular format keeps rows aligned in dropdowns.
• Sort long country lists by name and offer search, so people do not scroll through 250+ rows.
• Hide the flag from screen readers when the country name is written next to it.