CountryFlag

Displays flags of countries from around the world.

  • To add simple visual context so users can see the relevant country at a glance.
  • With the country name so the context is accessible to everyone.
  • For general visual context—use an illustration.
  • For users to select the right country—use a select with country flags.
FigmaReactiOSAndroidDocumentation
Released
Released
n/a
n/a
Released

Flag: works best accompanied by the country name.

Flags can create important context for users, but not everyone sees the flag. So make sure everything necessary is presented in a non-visual form.

This can mean including the name of the country with the flag so anyone who doesn't see the flag still gets the name. But if the flag is present next to text with the name, don't include the name with the flag so it's not repeated.