
It is becoming increasingly rare to see flags in language lists on many websites. Instead, we see a written list of languages, either in their original writing or in English. Flags seem to be disappearing from the UI of websites. And you, have you added flags to the language selector in your application?

People become more aware of the language inclusion problem, thus using flags to display languages become less popular than just a few years ago. It is also an interesting UI vs. UX issue: flags look nice, but they may insult some users. In this blog post, we will have a look at the issue of language representation in a language selector from different perspectives, and check what are the alternatives and good practices.

## Language selectors and language representation issue

With the increasing globalization of the internet, language selectors are becoming an essential tool to make sure that a website is accessible to all audiences. They allow users to select a language option they are comfortable with, thus improving accessibility and providing a better user experience. But choosing the right language selector and deciding where to put it on a website isn't as easy as it sounds.

Language selectors are often represented by flags, which can be problematic. Flags represent a country and not necessarily the language spoken in that country. This can lead to confusion and misunderstanding when it comes to representing different languages.

For example, Spanish is spoken in multiple countries, but the Spanish flag only represents Spain. The language is used in Chile, Argentina, Mexico and many other countries. Why would the Spanish flag represent Mexicans, Chileans, or other Spanish speakers who don't identify themselves with Spain? Similarly, French is spoken in multiple countries, but the French flag only represents France. How do Canadians, Belgians feel about their language represented by the French flag?

![Image showing different countries with Spanish language / flag](/blog/spanish-language.jpg)

**Flags don't accurately represent languages and can lead to miscommunication between people from different countries who speak the same language.** However, they are still in use and have many votes in favor, as they simplify the language selection and simply look nice. But, is this enough of an excuse? Let's go deeper and analyze the pros and cons of using flags to represent languages.

## Pros and cons of using flags to represent various languages

Flags have long been used as a way of representing cultures and languages around the world. While flags can be a powerful symbol of identity and pride, they can also be controversial due to their potential to cause political divisions.

### Pros

#### Pros: Flags are easy to understand

Flags are a powerful and universal, iconic language representation. They represent nations, countries, states, cultures, and ideologies in an easy-to-understand way. Their simplicity makes them easy to remember and recognize, making them an effective way to represent language in any format. When entering a website with the United Kingdom, Spain and German flags, users instantly know what languages the website supports.

![Sample language selector with language flags](/blog/language-selector-duolingo.png)

#### Pros: Flags are seen instantly
Without flags as a language indicator, it can more difficult to figure out the placement of the language selector. The flag icons are immediately associated with the option to select languages, so that when the user sees the flag, they immediately know where they can change the language on the site. Flag icons are more visual than the language name or code in written form.

#### Pros: Flags saves space
Using flags is a compact and efficient way to represent multiple languages, especially on websites or software interfaces where space is limited. A little round or rectangular icon will tell the user which language they are choosing and show all the languages available.

### Cons

#### Cons: Flags can cause misrepresentation
Flags are ubiquitous symbols of national pride, but when it comes to representing languages, they can be severely misleading. While many countries share the same flag, each may have a diverse collection of languages spoken within its borders. This means that simply relying on flags to represent language can lead to oversimplifications and even misunderstandings of the complexities of global communication.

#### Cons: Flag icons are limited
Flags only represent countries, so there is no flag to represent languages that are spoken in multiple countries or regions. Furthermore, there are no flags that could represent some non-official or semiofficial languages, for example, Marathi (used in India), Corsican or Cherokee. Naturally, we can try using a region flag, but what about people who use that language and do not identify with a region or country, or they live in different locations?

#### Cons: Using a flag as a representation of a language can be seen as cultural insensitivity
Some flags may carry **negative cultural or historical associations**, so using them to represent a language can be insensitive or offensive to some users.

For example, using the Spanish flag to represent the Spanish language can be culturally insensitive because it may be interpreted as ignoring the other official languages spoken in Spain, such as Catalan, Basque, and Galician. These languages have their own distinct cultures and histories and are important to the people who speak them.

Furthermore, it can also be connected to Spain's historical colonization and conquest of much of Central and South America. The use of the Spanish flag to represent the Spanish language in Mexico or Argentina may be particularly sensitive due to the country's history of colonization and subjugation under Spanish rule.

#### Cons: Flags add to the language inclusion problem

Some languages, such as indigenous languages or dialects, may not have a recognized or official flag, so using flags may exclude certain languages or cultures.

Flags can carry political and historical connotations that may be sensitive or offensive to certain groups of people. For example, the use of the Chinese flag to represent the Mandarin language can be controversial in Taiwan, where Mandarin is also spoken but the Taiwanese flag is more appropriate.

In some countries, multiple languages may be spoken, but using a single flag to represent the entire country's language can exclude or downplay the importance of minority languages.

#### Cons: Flags unite but also divide people

On one hand, flags can help unite people under the same banner and create a sense of pride in their shared language. On the other hand, flags can also be used to divide people and exclude those who don't fit into a particular category.

## Flags as language selectors and user experience

By displaying the flag of the user's language, it can enhance the user experience and make it easier for them to find content in their preferred language. On the other hand, however, they can generate negative emotions for visitors who are unfamiliar with the language or culture associated with a certain flag. The use of flags as language representation can lead to confusion and misunderstanding, which can ultimately affect the user experience.

Paradoxically, a visually clearer and pleasant-looking UI in terms of the use of flag icons in language selection may lead to poorer UX and overall worsen the experience of using the site.

## Alternatives to flag icons for international sites (tips for language selector)

When it comes to designing language selectors for international sites, many designers tend to rely on flag icons to represent different languages. However, as you could read above, this approach may not always be the best choice, so it is important to consider alternative options for language selectors.

### Use language names
Using language names in their native scripts or using simple text labels may be the best and the simplest option. The user should easily find the language name in its native script. Additionally, to make it easier for the user, order the list of languages alphabetically.

![Language selector with language names](/blog/language-selector-dubai.png)

### Use neutral, universal icons
Another option for language selectors is to use culturally neutral icons or symbols that are universally recognized, such as a globe, a book, or a speech bubble. They will look nice and won't cause misunderstandings.

![Language selector with universal icons](/blog/language-selector-universal-icons.png)

### Use language codes instead of flags
This is the option which can fully demonstrate the differences between the languages, without causing unnecessary friction. Use Spanish for Spain as es_ES, es-CL for Chile, es-CO for Colombia, ca for Catalan etc. Language codes are more widely recognized and understood than flags. This not only makes the language selector more accessible, but also helps to avoid any potential confusion or offense.

### Use language name and country flag together

An interesting option is to use both the flag icon and the language name together. The language name represents the actual language used for translations, and the flag will work as a visual country indication for where the language is used the most.

![LanguageTool - language switcher](/blog/language-selector-languagetool.mp4)

### Apply language automatically for user's region
By applying language automatically to the user's region, you can create a seamless and personalized user experience. This not only saves time for the user, but also makes the website more accessible and user-friendly. However, note that not all users are fans of automatic localization, they might prefer to read the site content in English than in the language used in their region. In this case, make sure the option to switch language is accessible and easy to find!

### Make language selector accessible
This is an essential topic when creating a language selector. Make sure that the language selector is easily accessible and prominently placed on the website. Not only does this make it easier for visitors to navigate the site, but it also proves that you value inclusivity and diversity. By making the language selector accessible and easy to find, you can attract a wider audience and improve the user experience for all visitors.

![placement of language selector example](/blog/language-selector-new-zealand.png)

## Conclusion. Is it time to move away from flag representation?

The language selector is a crucial feature for websites with a global audience. However, the traditional way of displaying language options through flags may not be the most effective method. The use of flags can often lead to confusion and misinterpretation, particularly if the flag does not match the language of the user. Moreover, flags are typically associated with countries rather than languages, which can lead to cultural insensitivity. This is particularly relevant when it comes to languages that are spoken in multiple countries, such as English or Spanish. Alternative methods may be more effective in ensuring accurate language selection. Overall, it may be time for businesses to reconsider their use of flag representation in language selectors and explore alternative options that are more user-friendly and culturally sensitive.

In SimpleLocalize, we gave our users an option to choose the language representation method for languages in our i18n translation editor. Languages always have their name or language code which defines the language best, but it is also possible to use flags for language representation or use a generic icon and just the language key.

![Flag and language icon options in SimpleLocalize languages](/blog/language-selector-simplelocalize.png)

Our advice: Be reasonable and think about how users who speak different languages might find your site. If you offer a service for European countries and your customer base is in Europe, and your website is translated into a few languages only, it will be probably ok to use the Spanish flag for the Spanish language, and the UK flag for English. The flag can indicate that written English on this site is English as written in the United Kingdom, or Spanish is Castilian Spanish.

What is important, is that you are here because you are creating or considering creating a language selector on your website or app. Providing multilingual, localized content for your audience shows that you care about your users and customers.

Localization is the key for happy customers and growing businesses, so think about getting SimpleLocalize to help you in this process and assist you in your daily work with your software translations. [Register now](/register/) and use our software created for simple translation management.


Flags in language selectors: should we keep or remove them?


In this article, I will share a list of country flag resources for your project. Free and paid options.
The list includes React-specific components that display country flags. I omitted projects that are just wrappers around other listed libraries.
Wrappers tend to be outdated and not maintained.

![Country flag projects comparison](/blog/country-flags/country-flags-data-page.png)

If you are curious about how different country flags projects compare to each other, take a look at the [country flags](/data/flags/) page, where we used 4 different libraries to display flags.

## Flag-icons<span class="font-weight-normal">,&nbsp;SVG flags with CSS integration</span>

[Flag-icons project](https://github.com/lipis/flag-icons) is a collection of all country flags in SVG, based on flags taken from Wikipedia. Flags are available in 2 formats: 4x3 and 1x1.
The project offers a CSS integration, thus uses only two-letter ISO 3166-1 codes for country codes.

![flag icons project](/blog/country-flags/flag-icons.jpeg)

```shell
npm install flag-icons
```

```tsx
import "node_modules/flag-icons/css/flag-icons.min.css";
````

The usage of the library is straightforward, and it looks as follows:

```html
<span className="{`fi" fis fi-${countryCode}`} />
```

- Use the `fi` class to display a flag,
- use the `fis` class to display a flag in a square,
- and the `fi-{COUNTRY_CODE}` class to display a flag for a given country.

`{COUNTRY_CODE}` is always a [two-letter country code (ISO 3166)](/data/flags/), for example `pl` for Poland.
Letters are always lowercase. Below, you can see a list of all available country codes and their flags from the package.

## Circle-flags<span class="font-weight-normal">,&nbsp;stylized country flags</span>

[Circle-flags](https://github.com/HatScripts/circle-flags) is also a collection of country flags in SVG format. They are a great choice for displaying flags in a small space,
but such feature comes with a price. These are not accurate representations of the flags, they are simplified and stylized to look good when viewed together.
The project uses only two-letter ISO 3166-1 codes for country codes.

![circle-flags project](/blog/country-flags/circle-flags.jpeg)

To use the flags, you can hotlink them from the project's GitHub page:

```html
<img src="https://hatscripts.github.io/circle-flags/flags/br.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/pl.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/ua.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/us.svg" width="48">
```

or you can install the package using npm:

```shell
npm install --save https://github.com/HatScripts/circle-flags
```

There is also a React wrapper for this library: [react-circle-flags](https://www.npmjs.com/package/react-circle-flags). Circle-flags also offers a collection of [language flags and locales](https://github.com/HatScripts/circle-flags/tree/gh-pages/flags/language).

## FlagCDN<span class="font-weight-normal">,&nbsp;free CDN for country flags</span>

[FlagCDN](https://flagcdn.com/) is a free CDN for country flags. It is a great choice for displaying flags in a small space.
The service offers a variety of flag sizes, and you can also use it to display flags in different formats, such as SVG, PNG, JPG, and WebP.

![FlagCDN project](/blog/country-flags/flag-cdn.jpeg)

## WorldData.info<span class="font-weight-normal">,&nbsp;retro GIF flags</span>

[WorldData.info](https://www.worlddata.info/downloads/) offers a collection of 249 GIF flags that may fit best for
retro stylized projects. They are available in 190x114 size. You can download them for €8 and use them in your project.

![WorldData retro GIF flags](/blog/country-flags/retro-flags.jpeg)

## Emoji flags<span class="font-weight-normal">,&nbsp;unicode country flags</span>

Emoji flags are a great way to display a country flag in a small space. They are also supported by most browsers and operating systems. You can use them in your project by simply copying and pasting the flag from the list below.
Remember that emoji flags may not be supported by all browsers and operating systems, and they look different on different devices.

![Emoji flags](/blog/country-flags/emoji-flags.jpeg)

You can get a full list of [emoji flags and country data](/data/flags/) using the following command:

```shell
curl https://cdn.simplelocalize.io/public/v1/countries
````

The JSON contains a list of countries with emoji flags in `flag` property.

## React-world-flags<span class="font-weight-normal">,&nbsp;inline SVG flags</span>
[React-world-flags project](https://github.com/smucode/react-world-flags) is a React wrapper for [Flag-icons](https://github.com/lipis/flag-icons), but here flags are rendered as **inline SVGs**, and it supports more country code formats.
You can use the `height` prop to set the flag height and the `code` prop to set the flag code. It supports ISO 3166-1 codes as two-letter (Alpha-2), three-letter (Alpha-3) and three digit (numeric) country codes.

![React World Flags](/blog/country-flags/react-world-flags.jpeg)

Installation

```shell
npm install react-world-flags
```

Usage

```tsx
<Flag code="nor" height="16" />

// Output <img src="data:image/svg+xml..." height="16">
```

### FlagKit<span class="font-weight-normal">,&nbsp;flags for iOS developers</span>

[FlagKit](https://github.com/madebybowtie/FlagKit) offers a collection of attractive flag icons that can be utilized in
various applications and websites. Each flag is available in individual PNG and SVG files, and there is also an Asset
Catalog and framework designed specifically for Apple platforms, making integration effortless.

![Flags by FlagKit for iOS developers](/blog/country-flags/flag-kit.jpeg)


List of country flag icon projects


If you want to jump straight to the code, you can find it on [GitHub](https://github.com/simplelocalize/nextjs-tailwind-language-selector),
and the most important part is in the [src/components/LanguageSelector.tsx](https://github.com/simplelocalize/nextjs-tailwind-language-selector/tree/main/src/components).
However, we recommend reading the whole article to understand how exactly building a language selector works.

The article assumes that you have some basic knowledge of React and Tailwind CSS.
We also assume that you already configured Next.js, Tailwind and any internationalization library in your project.

For a very long time, SimpleLocalize was not showing flags next to languages in our languages' lists because we wanted to avoid making it wrong. We did not want to assume that a language is always associated with a country.
However, eventually, we have decided that flags are a must because they highly improve user experience and translation performance;
it is far easier to just look at the flag and determine the language this way instead of reading the language name.

![Languages with flags in SimpleLocalize](/blog/language-selector/translation-project-languages-with-flags.png)


Recently, we also started getting many requests from our users to add flags to the [Translation Hosting](/docs/general/translation-hosting/) or
add an option to download them, mostly for the need of using them in language selectors.
In response, we would like to share our solution. We are going to show you how to create a language selector with flags using Tailwind CSS.

## What are we going to build?

We will create a language selector that allows users to switch between different languages.
The language selector will be a dropdown that will show a flag next to each language.
For that purpose, we will use Tailwind as CSS framework, Next.js as a React framework, [react-i18next](/docs/integrations/next-i18next/) package
for translations of our mini app, and [flag-icons](https://github.com/lipis/flag-icons) package for flags.

![Language selector demo with Tailwind](/blog/language-selector/language-selector-tailwind-demo.png)

## Get country flags

We will start by creating a component that will display a flag for a given country. We will use the
[lipis/flag-icons](https://flagicons.lipis.dev) package to show flags.

First, install the package using npm or yarn.

```shell
npm install -s flag-icons
```

Let's now import the CSS in `_app.tsx` from the `node_modules` and we are ready to use the flags.

```tsx
import "node_modules/flag-icons/css/flag-icons.min.css";
````

The usage of the library is straightforward, and it looks as follows:

```html
<span className="{`fi" fis fi-${countryCode}`} />
```

- Use the `fi` class to display a flag,
- use the `fis` class to display a flag in a square,
- and the `fi-{COUNTRY_CODE}` class to display a flag for a given country.

`{COUNTRY_CODE}` is always a [two-letter country code (ISO 3166)](/data/flags/), for example `pl` for Poland.
Letters are always lowercase. Below, you can see a list of all available country codes and their flags from the package.

![SimpleLocalize flags page](/blog/language-selector/flags-page.png)

See the [full list of flags](/data/flags).

## Build a language selector

Now that we have a component that displays a flag, we can create a language selector component.
We will use the `useTranslation` hook from the `react-i18next` package to get the list of languages and the current language.

```tsx
const {i18n} = useTranslation();
const [isOpen, setIsOpen] = useState<boolean>(true);
const handleLanguageChange = async (language: Language) => {
    await i18n.changeLanguage(language.key);
    setIsOpen(false);
};
```

### Fetch application languages

We will start by fetching the list of languages from the SimpleLocalize CDN. We will use the `_languages` endpoint to get the list of languages.
However, it is optional, as you can also hard-code the list of languages in your application.


```tsx
    const [languages, setLanguages] = useState<Language[]>([]);
    useEffect(() => {
        const setupLanguages = async () => {
            const appLanguages = await fetch("https://cdn.simplelocalize.io/{YOUR_PROJECT_TOKEN}/_latest/_languages").then(response => response.json());
            setLanguages(appLanguages);
        };
        setupLanguages();
    }, []);
```

Let us create a new state variable called languages and use `useEffect` hook to fetch a list of available languages from the CDN using fetch API.
But you can use any other HTTP client library you prefer, like axios, superagent or useQuery.

### Configure outside click handler

Whenever we click outside the language selector, we want to close it. We will use the `useEffect` hook to add a click handler to the `window` object.

```tsx

    const LANGUAGE_SELECTOR_ID = 'language-selector';
    useEffect(() => {
        const handleWindowClick = (event: any) => {
            const target = event.target.closest('button');
            if (target && target.id === LANGUAGE_SELECTOR_ID) {
                return;
            }
            setIsOpen(false);
        }
        window.addEventListener('click', handleWindowClick)
        return () => {
            window.removeEventListener('click', handleWindowClick);
        }
    }, []);
```

In this example, we use the `closest` method to find the closest parent element that matches the selector.


### Add selected language button

Now that we have all the necessary data, we can create the language selector. We will start by creating a button that will display the selected language.
We will use `i18n.language` to get the currently selected language for the app to find the language object for the selected language key.
Language object will be used to display the flag and the name of the language.

![Language selector button](/blog/language-selector/language-selector-button.png)

```tsx
const {i18n} = useTranslation();
const selectedLanguage = languages.find(language => language.key === i18n.language);
// ...

<button
    onClick={() => setIsOpen(!isOpen)}
    type="button"
    className="inline-flex items-center justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
    id={LANGUAGE_SELECTOR_ID}
    aria-expanded={isOpen}
>
    <FlagIcon countryCode={selectedLanguage.key}/>
    {selectedLanguage.name}
    <svg
        className="-me-1 ms-2 h-5 w-5"
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 20 20"
        fill="currentColor"
        aria-hidden="true"
    >
        <path
            fillRule="evenodd"
            d="M10.293 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L10 12.586l3.293-3.293a1 1 0 011.414 1.414l-4 4z"
            clipRule="evenodd"
        />
    </svg>
</button>
```

- `FlagIcon` component is a wrapper around the `span` element that displays the flag. It's useful because we can override a flag for a given language.
- The `svg` element is used to display the chevron icon that indicates whether the dropdown is open or not.
You can extract it later into a separate component or use any other icon of your preference.
- `onClick` handler will toggle the dropdown.
- `id` attribute will be used to identify the button for the outside click handler.


### Add language selector dropdown

Now we can create the language selector dropdown that will appear when `isOpen` state is set to `true` and load inside the list of languages based on the `languages` state variable.
We used `grid grid-cols-2 gap-2` classes to display the list of languages in two columns.
We also used `rounded-r` and `rounded-l` classes to round the corners of right and left language entries.

![Language selector dropdown](/blog/language-selector/language-selector-dropdown-list.png)

```tsx
{isOpen && <div
    className="origin-top-right absolute right-0 mt-2 w-96 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5"
    role="menu"
    aria-orientation="vertical"
    aria-labelledby={LANGUAGE_SELECTOR_ID}
>
    <div className="py-1 grid grid-cols-2 gap-2" role="none">
        {languages.map((language, index) => {
            return (
                <button
                    key={language.key}
                    onClick={() => handleLanguageChange(language)}
                    className={`${
                        selectedLanguage.key === language.key
                            ? "bg-gray-100 text-gray-900"
                            : "text-gray-700"
                    } block px-4 py-2 text-sm text-start items-center inline-flex hover:bg-gray-100 ${index % 2 === 0 ? 'rounded-r' : 'rounded-l'}`}
                    role="menuitem"
                >
                    <FlagIcon countryCode={language.key}/>
                    <span className="truncate">{language.name}</span>
                </button>
            );
        })}
    </div>
</div>}
```

## Ready to use language selector

In this tutorial, we created a language selector component that uses flags to represent languages.
We used the `react-i18next` package to get the list of languages, the current language and translate our mini application.

With those few steps, we created a language selector that can be used in any React application.

![Tailwind language selector demo](/blog/language-selector/language-selector.mp4)

## Our tips for creating a language selector

Building a language selector is not a trivial task. There are many things to consider,
and we will share some of our tips that we learned while building many language selectors over the years.

### Languages don't have flags
Remember that the country's flag might not be the best option to represent a language.
For example, the flag of the United Kingdom is used to represent English, but it is also used to represent Welsh, Scottish Gaelic, and Cornish.
However, flags are a good option if you plan to support only a few languages, so they will not overlap with the countries. They also look nice and are easy to understand.

### White parts of flags can be problematic

Some flags have a white part, which can be problematic when used on a light background. In this tutorial, we solved this
by setting an inset border on the flag, to make it stand out from the background.

```scss
.fiCircle {
  width: 24px;
  height: 24px;
  font-size: 24px;
  border-radius: 100%;
  border: none;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .06);
  background: white;
}
```

The inset border is a `box-shadow` property, which makes it appear inside the element.
Look how the Polish, French and Italian flags are looking with and without the inset border.

![add box-shadow with inset for flags](/blog/language-selector/box-inset-for-flags.jpg)

It will make the white part stand out from the background and will not affect the rest of our flags significantly.

### Complex flags in small sizes might look bad

Some flags are more complex than others. For example, the flag of Spain has a coat of arms in the middle.
In this case, we can use a simple trick to make it look good. We can use a `background-size` property to make the flag smaller.

![Complex flags icon problem](/blog/language-selector/complex-flags-problem.jpg)

In small sizes, the coat of arms is not visible, and it does not look as good as other flags. All flags are in SVG format, so we can adjust them to our needs.
But note that altering flags is not always a good idea because it can be considered as a violation of the flag code.

### Country codes are always lowercase
Country codes are always lowercase. This is important because [flag-icons](https://flagicons.lipis.dev) package uses lowercase country codes in the CSS class names.
Remembering about this can save you a lot of time because you will not have to debug why your flags are not showing up. 😉

![Flag icons CSS](/blog/language-selector/flag-icons-css.png)

I hope this tutorial was helpful, and you learned something new. Thanks for reading!
If you are looking for language selector inspiration, check out our [language selector examples](/blog/posts/ui-design-language-selector-examples/) blog post.


Translation Hosting

SimpleLocalize CLI

REST API

Auto-translation

Alternative translations

Ui

Flags in language selectors: should we keep or remove them?

List of country flag icon projects

How to create a language selector with Tailwind CSS