Flag Icons: Why They’re Bad UX for International Users

After you translate a website or mobile app into different languages, it’s important to consider how your visitors can switch between languages.

Lots of companies use flag icons in their user experience (UX) to represent a language, like showing Spain’s flag for the Spanish language:

Using flag icons to represent language is a common practice on the internet, but is it helpful for your audience? Not always.

The Downside of Using Flag Icons to Represent Countries in UX

Here are some problems that can arise from the use of flags to represent languages on your website or mobile app.

Some countries have multiple languages

A country may have one flag but more than a single official language.

Should a Swiss flag take you to a page written in French, or to a German page? The official languages of Switzerland are German, French, and Italian. So, a Swiss flag icon can’t be used to represent one language.

What about India, which has over 22 different languages? Using India’s flag to represent Hindi-Urdu—India’s most common language—could alienate or confuse non-Hindi speakers.

Some countries share a single language

Certain countries like the US and UK share a common language. So which flag would represent English speakers in both countries? One choice is the Stars and Stripes, but this could confuse some users from other English-speaking countries. A second option is the UK’s flag, the Union Jack, but the UK is home to just a small percentage of the world’s English speakers. You might end up annoying residents of Ireland, Jamaica, New Zealand, or Canada.

Would a hybrid flag work? Some people might consider combining the American flag with the English flag as an all-purpose English language icon. However, this may give the impression to some people that the two countries are merged. And, in any case, most people don’t prefer to see their country’s flag chopped up or merged with another country’s flag. This also applies to Arab countries, where choosing a single flag to represent 20+ Arabic-speaking countries could be confusing.

Flags have political implications

Sometimes, national flags fly with a lot of political and historical meaning. For example, the United Nations classifies Taiwan as an independent country. However, China regards Taiwan as a region of China. So if you put a Taiwanese flag on your website or app, you might be picking sides in a geopolitical disagreement. And if you target a Chinese audience, some people may not appreciate a display of the Taiwanese flag.

Flags scale poorly

Lots of different flags on a page are confusing. As more flags are added, the collage of colors affects usability. Many flags are very similar, and when displayed in a small size on a screen, it’s hard to distinguish one from another.

Best Practices for Presenting Different Languages

When you present links to multilingual content in your UX, consider these best practices.

Don't use flags!

The solution to flag confusion is simple – don’t use flags to represent languages. The best option is to stick to language – i.e., the name of the language written out. Abbreviations and language codes can also be helpful.

Use the name of the language in its native format

The text of the language should be in the native translated name of the language, for instance, Deutsch for German and 日本語 for Japanese.

Provide an easy way to change languages

To make it easy for users to switch languages, add a language selector menu to the header or footer of your site. At Localize, we provide multiple UX-friendly options for language display on your site or mobile app, including a customizable language selector:

Localize is an innovative, user-friendly TMS that makes localization feel effortless.

Contact us to learn more about how we can help you translate content for new global audiences.