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
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 some text with its name, make sure to hide the flag from screen readers.