[GH-ISSUE #940] Reorder flags with the Unknown flag first on the list #445

New issue

Closed

opened 2026-03-03 14:38:26 +03:00 by kerem · 1 comment

kerem commented

2026-03-03 14:38:26 +03:00

Owner

Originally created by @colinj on GitHub (Mar 10, 2022).
Original GitHub issue: https://github.com/lipis/flag-icons/issues/940

My suggestion is that you should reorder the flag classes by placing the unknown flag (xx) before all other flags.

In terms of CSS precedence, if .fi-fr is placed on the same element as .fi-xx, the unknown flag will override the French flag due to the fact that the French flag is declared earlier than the Unknown flag. By declaring the Unknown flag first, means that every other flag will override it if they reside on the same element.

So why would you want to declare both flags on the same element?

In my use case, I have a system that stores the 2-letter country code against items in a database. This allows me to display the relevant flag-icon on the page by adding the flag class to the span element (forgive me, I am using Vue):

<span class="fi" :class="[`fi-${countryCode}`]"></span>

Unfortunately, the data may contain invalid 2-letter country codes. (eg. vb). To combat this, I would like it to display the "Unknown" flag as a fallback flag.

<span class="fi fi-xx" :class="[`fi-${countryCode}`]"></span>

For a country code of vb, this would be translated to class="fi fi-xx fi-vb". Since .fi-vb doesn't exist, this gets ignored and .fi-xx will produce the "Unknown" flag.

For a country code of fr, this would be translated to class="fi fi-xx fi-fr". If .fi-fr was declared after .fi-xx then the French flag should override the "Unknown" flag and page would display the French flag.

Unfortunately, with .fi-xx declared last, the above example will show the "Unknown" flag instead.

Please consider this proposal as I think this would be a benefit for a lot of people using your library.

Originally created by @colinj on GitHub (Mar 10, 2022). Original GitHub issue: https://github.com/lipis/flag-icons/issues/940 My suggestion is that you should reorder the flag classes by placing the unknown flag (`xx`) before all other flags. In terms of CSS precedence, if `.fi-fr` is placed on the same element as `.fi-xx`, the unknown flag will override the French flag due to the fact that the French flag is declared earlier than the Unknown flag. By declaring the Unknown flag first, means that every other flag will override it if they reside on the same element. ### So why would you want to declare both flags on the same element? In my use case, I have a system that stores the 2-letter country code against items in a database. This allows me to display the relevant flag-icon on the page by adding the flag class to the span element (forgive me, I am using Vue): ```vue <span class="fi" :class="[`fi-${countryCode}`]"></span> ``` Unfortunately, the data may contain invalid 2-letter country codes. (eg. `vb`). To combat this, I would like it to display the "Unknown" flag as a fallback flag. ```vue <span class="fi fi-xx" :class="[`fi-${countryCode}`]"></span> ``` For a country code of `vb`, this would be translated to `class="fi fi-xx fi-vb"`. Since `.fi-vb` doesn't exist, this gets ignored and `.fi-xx` will produce the "Unknown" flag. For a country code of `fr`, this would be translated to `class="fi fi-xx fi-fr"`. If `.fi-fr` was declared after `.fi-xx` then the French flag should override the "Unknown" flag and page would display the French flag. Unfortunately, with `.fi-xx` declared last, the above example will show the "Unknown" flag instead. Please consider this proposal as I think this would be a benefit for a lot of people using your library.

kerem closed this issue

2026-03-03 14:38:26 +03:00

kerem commented

2026-03-03 14:38:27 +03:00

Author

Owner

@colinj commented on GitHub (Apr 3, 2022):

I created a PR for this issue: https://github.com/lipis/flag-icons/pull/950

@colinj commented on GitHub (Apr 3, 2022): I created a PR for this issue: https://github.com/lipis/flag-icons/pull/950