CountryFlag

Displays flags of countries from around the world.

GuidelinesReact

When to use

  • 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.

When not to use

  • For general visual context—use an illustration.
  • For users to select the right country—use a select with country flags.

Component status

Figma

React

iOS

Android

Released
Released
Released
Released

Content structure

Flag: works best accompanied by the country name.

Content

Include non-visual information

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.