Free Flag Icons | Hacker News Reader

Free Flag Icons

gosquared.com

304 pointstimparker76 comments

Using flags in your visual design can be tempting but in my experience it's a bad idea. The problem is that certain flags force you to "take sides" in political disputes that you likely aren't aware of and don't understand. You'll inadvertently make one side very angry with you, and you won't even really know what political statement you accidentally made.

It's OK if you stick to flags you know but if you start trying to have a list of all flags, there's no way to do that without making various groups angry.

I don't doubt that there's a "right" answer to all disputes over flags but do you really know what all the disputes are and want to arbitrate them as part of developing your software ...

Deliberately not digging up specific disputes because the whole point is, if you have to ask what they are or if you start debating them case by case, maybe this wasn't a can of worms that needed opening.

(also, the last time I encountered this was long enough ago that I'm sure the relevant examples have changed, and I never understood them well to begin with. But it was clear that flags poked more than one political group in the eye.)

And even worse is using them to indicate languages. There are countries with more than one language (e.g. Belgium which Dutch, French and German) and there are languages which are used in more than one country (think us.png vs gb.png for "English").

So, rule of thumb: - never use flags to indicate a language - use flags to indicate a country only after thinking twice

EDIT: Nonetheless, this flag collection looks awesome, and if I ever have a legit use case for flags in a GUI I'll definitely use them. Thanks for sharing under a free license!

One issue I've also encountered is websites you use languages to indicate countries.

For example, I often appreciate browsing a shop in English (better content, more comments), so I select it from the dropdown, but end up browsing the US or UK shop, whereas I'm in France.

One website that gets it right is Zara: https://www.zara.com/ You select the store (country) and the language independently.

How do you indicate a language in icon-like manner then? Is using the textual ISO codes the only safe option?

It depends.

First of all, flags are really bad for languages since there's an n:m relationship. Which flag would you use for "English"? The USA flag? The Flag of England? The Union Jack?

If you offer only "English" then depending on if you write "center" or "centre" you may offend either USA or British people. Same for "German", where a Swiss may be offended to see "Straße" while a German could be offended by seeing "Strasse". Of course most people won't care about that and I bet most Brits are used to see "color" without a 'u' on the internet, but from experience I can say that there are people who care about or even get offended by that.

But even if using textual representation for languages like "English" is not perfect, offering every language-country possibility (en-US, en-GB, en-??...) isn't a viable route in most cases since there are way to many combinations.

Just think of yourself (assuming you're from the USA): would you rather see the word "English" in a language selector or the Flag of England?

So what should you do? I'd suggest going with textual representations like "English" or the ISO 639-x shortcodes ("en" or "eng"). Being German that's easy to say for me, and I know a handful of people who'd like me to distinguish between de_DE, de_AT and de_CH.

So as I've said: it depends :-)

From what I've read about it--by people who thought long and hard about this issue--the generally most accepted solution seems to be the Wikipedia way: use the name of the language as its written in in the language itself.

The reason for the latter is that, say the site is originally presented in Russian, I don't know how "Dutch" is written in Russian so I couldn't pick it, but I do know what "Nederlands" means (FYI, that's the Dutch word for "Dutch", beats me why you English-speakers don't call it "Netherlandish", but each to their own I guess ;) which again demonstrates names of the same language in different languages can vary a lot).

Though I suppose if you're really tight on space, ISO codes would probably also work.

Note that Wikipedia itself is sometimes a rather extreme example; most websites/applications will only offer a choice between a small handful of languages.

When the list of languages in the sidebar of Wikipedia is very long, it's not the most user-friendly method of selecting one. On the other hand, with flags that would be much worse, bordering on impossible (while the UK and US flags are pretty unique, there's a couple of flags that are very hard to distinguish from the flag of the Netherlands, for instance).

I really wonder if there might be some creative better solution to language-selection than "the Wikipedia way", but I really want to stress that using country flags is not that solution, for a variety of usability reasons, political reasons and emotional reasons, most of which are probably outlined somewhere in this discussion so I won't repeat them all.

I have to admit I have been guilty of using a German/Dutch/French flag for language selection on a website I developed many years ago--I didn't realize it was a bad idea back then (for instance, the flag of Belgium has the same colours as the flag of Germany in a different order, but they speak Dutch and French there, while the flag of France and the one of the Netherlands differ mainly by a 90 degrees rotation) (and the blues are subtly different, afaik).

This is so very true. You really can't win this one. Even if you're 100% not biased, your clients most definitely will be.

You can put all the flags up, disputed or not. Then you have people mad at you for putting up the disputed ones whom they view as being an insult. You can remove the disputed ones, and people will accuse of wanting oppression and being anti-freedom. Even when you avoid this problem, you have the problem of people not wanting to see a particular flag anywhere, dispute or no dispute.

OK, I'll bite.

Design is all about making decisions, which will invariably make person A happy and person B unhappy (for some values of A and B). Look at how many people are ranting this month about Apple's decision to remove X11.app from OS X, for example, even though you can download a newer version for free. If your goal in building software is to make every person on the planet satisfied, you are setting yourself up for failure. You should make clear decisions that make most of your users happier, not water down all design to make everybody not-upset.

All of the most successful systems today seem to be "opinionated", perhaps not in terms of global politics (usually) but in other ways. Being more clear to the vast majority of your users probably has a lot more value than not upsetting the less-than-1% who probably are even less than their share of your revenue, anyway.

Besides, in my experience, more important than getting it right is being responsive. If you're concerned about getting it wrong, then just put a link next to it that says "Did we forget / screw up yours? Tell us here: __". Then you will have actual data about who's coming to your particular page and what they want to see there.

Or, you can pick a relevant ISO/UN/EU/... list, and say you're using that for country names and flags. That may or may not be biased, but it removes you from the decision. If somebody is so mad they refuse to use your program because they don't like an ISO/UN/EU list, I don't know how they got past the Time Zone Setup screen on their computer.

There's people who will get upset if you say there are 50 states in the USA. They can believe what they like but I'm not going to lift a finger to accommodate them in my software.

> Or, you can pick a relevant ISO/UN/EU/... list, and say you're using that for country names and flags. That may or may not be biased, but it removes you from the decision. If somebody is so mad they refuse to use your program because they don't like an ISO/UN/EU list, I don't know how they got past the Time Zone Setup screen on their computer.

The UN/ISO list has Taiwan as "Taiwan, Province of China". Go look for that string in any operating system, app or on any website that is internationally popular - you won't find it. The ISO is not neutral, and the Time Zone Setup guys know this.

What's the mood on something like the Unicode 6 regional indicators (see http://std.dkuug.dk/jtc1/sc2/wg2/docs/n3727.pdf) when the support stabilizes? e.g. 🇺🇸 (U+1F1FA U+1F1F8) can be displayed by the user agent as the letters "US" or a United States flag but the choice is up to the UA rather than the developer.

I had a startup where we put countries in a pulldown. The country list was pulled verbatim by me from one of Google's properties, which I assumed to be up to date. Within a few days I had several emails from people in Macao saying the name of the country was wrong and needed to be fixed. The entry had some mention of China in parenthesis and it wasn't until I researched a bit further I realized it was a 'special administrative region' of China: http://en.wikipedia.org/wiki/Special_administrative_region

While I had no horse in the race, I welcomed the opportunity to learn more about someone else's culture. Perhaps it's not so much taking sides as it is better understanding all the people who are involved.

By the same logic you shouldn't use red star symbol in your design if its target country includes one of the countries formerly occupied by the Soviet Union: https://en.wikipedia.org/wiki/Red_star#Legal_status

This is correct.

You also wouldn't use a swastika in an app targeting Germany, would you?

I've had google geocoder mark things as serbia instead of kosovo which resulted in angry emails accusing me of deliberately taking sides. No idea that I even had data in that region

A bit of advice: avoid using flags altogether in your user interface unless you really, really need to refer to specific national/political entities. There's far too much room for error or offense, whether you're incorrectly assigning the wrong flag to a geographical region or have not represented the flag correctly. I haven't looked at the flag set, but I'm betting there are errors related to the correctness of layout, aspect ratios and colors and to the clarity of symbols and text.

Even more importantly, never use a flag to represent a language choice.

(* most major websites do avoid using flags, but one notable exception is Apple, which completely corrupts every single flag with their own shiny style: http://www.apple.com/choose-your-country/ ...)

A bit of advice: actually look at something before judging it. If you'd downloaded, you'd know that they all look correct.

I downloaded it and looked at Estonia's flag. It's all wrong. I don't personally care, it looks close enough, but some people might take issue with this.

The ratio is 3:2, but the correct ratio is 11:7. The colors are wrong, both the gradients and flat versions. The correct RGB colors are well defined. [1]

[1] Colors and ratio are defined on this page http://valitsus.ee/et/riigikantselei/riigi-ja-omavalitsuste-...

It's a set of flag icons for the web, it's not to hang off the government building.

If we did exact aspect ratios for every flag they would all be different and look shit. We tried to be as exact as possible with colors and shapes, if they don't work for you guys or are not close enough then you don't need to use them.

Not aimed directly at you, just at anyone who doesn't find them precise enough.

Agree about aspect ratios, but we should expect rgb colors to be accurate.

If you check out the flat flags the colors are exact, obviously the styled ones have subtle shadowing etc, and are probably out by a very small margin.

I checked out Estonia from above and the colour doesn't match the examples on Wikipedia. I've also checked out the Australian flag, and it's eyeball-different - the blue in the real flag is closer to navy blue. The blue should be #002B7F, but a colour picker tells me that the 64x64 flat flag has a blue of #003399.

It's not a big problem in my opinion - no-one should be overly hung up about minor anomalies like that for web icons - but it's not true to say the colours are exact.

You're completely missing my point. I'm recommending against using flags at all, correct or otherwise. It's just too much of a sensitive issue for many users.

And to your point about correctness: there are specific issues such as illegible text in the Saudi flag and general issues such as the use or gradients or borders throughout.

+100 on this comment

For people saying "don't use flags", and "especially not for languages"...

I totally agree in theory, but...

In a lot of interfaces, having something visual helps a lot. Especially when you need to pick something from a list where you don't even know what language the user speaks!

Obviously, you can present a text list like "English (American)", "Português (Brasil)", "አማርኛ", "贛語", but it can look kind of ugly, how do you decide to sort them, etc.

Plus, a lot of times the language is tied to a country, because each country has their spelling and grammar differences, etc. That's why many times you don't see "Portuguese" in language lists, but rather "Portuguese (Portugal)" and "Portuguese (Brazil)" -- because there's no such thing as a general-purpose Portuguese.

So while flags aren't perfect, a lot of the time they help far more than they hurt. In a perfect world, there would actually be language-specific icons that everyone recognized. Suggestions, anybody?

What flag do you suggest we use for es_US and fr_CA? Or how to distinguish de_CH and fr_CH?

Common practice seems to be using a half Swiss/half German flag for de_CH, and half Swiss/half French flag for fr_CH or just the Swiss flag for both languages.

If how to sort a text list is on your list of problems, you don't have a problem. As long as the order is consistent, users (in general) will be happy with it.

How is Esperanto classified?

Why would you not simply use the Esperanto flag?

http://flagspot.net/flags/qy-eo.html

Neat! I was not aware of it.

Under what license are they released? There is no licensing information on the page, or on the parent "freebies" page, or in the zip file itself.

They're MIT, will be adding the license in a bit

Licence is now in the .zip

The website flags these as "vector" - they are gorgeous and I'm wondering if the actual SVG versions are available?

If you want one particular flag (instead of many for language purposes), I think these are very fine.

No vector format? Don't get me wrong, these flags are appreciated, but to spend all that time making them in a bitmap format? Kinda seems like a bit of a waste, since flags seem PERFECT for vector format.

If you want vector flags use wikiepedias SVG flags. These are made to be pixel perfect at different sizes, something that wouldn't work if we just batched them all from vectors.

http://commons.wikimedia.org/wiki/Sovereign-state_flags

Wow, awesome. I'll definitely be using this. In fact this is so awesome I actually gave my real email address.

You didn't have to give an email address, btw. So no point in giving a fake one anyway. But I think someone willing to bypass "registration" would not impulsively submit a fake address, but rather would have read the small print.

Thanks for the contribution. It would be great to have all flags, especially the small ones, in ONE file to avoid x requests on sites with many flags. Here is one idea: offer a service for people who need multiple country flags on their site to generate the one big flag picture set they need for their specific set of flags - one big country-selector that spits out a big flags.png after submit would be a great promo! Thanks!

Thanks! We'll be adding it to github in the next few days with this feature :)

It would help tremendously if the files were named by, say, ISO 2-letter country codes (where it applies).

There are two folders within the zip, one has them named in this way :)

Oh, right, thanks, that's exactly what I was thinking about :)

What were the criteria for including some disputed states (South Ossetia, Somaliland) while excluding others (Transnistria, Azawad)?

When we made them we used this > http://commons.wikimedia.org/wiki/Sovereign-state_flags and a bit of > http://commons.wikimedia.org/wiki/Flags_of_unrecognized_stat...

Thanks for making these, but I wish you would have also acknowledged the sources in your LICENSE.txt.

As for the license itself -- even though I used to work on licensing and UI for Wikimedia Commons, I acknowledge this can be quite confusing, so I sympathize. I've rewritten this comment a couple of times already.

It's not clear to me if you can re-release everything under any single license. It's also unclear to me if you can assert copyright over the whole thing, as you must if you are going to use a CC license or the BSD-style license you used.

However, I would suggest that whatever you are doing, you should not arbitrarily reassign the work to a BSD license. They are not designed for graphics, since they require publication of the license wherever the graphic is used. Imagine if you wanted to use the icon on a postcard; according to the license you'd have to include the license text on the postcard. If you want these to be used widely Creative Commons Zero is much better... assuming you can assert copyright for the whole thing as a derivative work.

http://creativecommons.org/publicdomain/zero/1.0/

The really pedantically correct thing would be to list the licenses for each and every flag, but I acknowledge that would be no fun at all, and as far as I know Wikimedia Commons doesn't have tools to make that easy with large collections.

Sorry for the legalese - I think you did a great thing here, I'm just trying to help you share it with others.

I'm curious, how did wikipedia get copyright over the designs of national flags? What right to they have to attribution?

Wikipedia took over the world while nobody was noticing. Didn't you get the memo?

You are a bit confused here, but I don't blame you. Here is the legal situation as far as I understand it (IANAL, standard disclaimers apply).

The Wikimedia Foundation hosts content on its servers provided by the community. Usually, the individual contributors own the copyright to all the content. And when they submit content to a WMF site, like Wikipedia, they explicitly agree to license the work under terms such that others can use it. (I am ignoring the case of fair use for now).

Certain kinds of contributions, however, are not original to the contributor. This gets confusing because then you have to prove that it's okay to reuse.

Depictions of national flags are often ineligible for copyright, or are explicitly granted to the public domain, in their country of origin. However, "public domain" has no legal meaning internationally.

The CC0 license is really designed for creators who want to dedicate their work to be freely copied, like public domain, but want something that is legally meaningful.

But - there was a large collection of flags licensed CC0 which became the basis of the Wikimedia Commons collection. Other flags have specific justifications for why they are public domain, sometimes quoting laws from specific countries. This is the good thing about Wikimedia Commons, it doesn't force you into any straightjacket to explain how the license works. But that also means that everything's kind of a mess if you want to get a straight answer to a question like "under what license could I republish all the flags on Wikimedia Commons?"

And that's where it sits. If you squint, everything's not so bad. But maybe Wikimedia Commons should relicense all the flags as ineligible for copyright -- it would make things a lot simpler.

Of course, because copyright is taking over the world, I would not be surprised if there are some nations that would insist they do hold the copyright to their flags. For instance, the EC insists it holds the copyright to their flag and the Euro symbol. Maaaaadness.

http://commons.wikimedia.org/wiki/File:Flag_of_Europe.svg#Li...

http://ec.europa.eu/economy_finance/euro/cash/symbol/index_e...

the question is why 'a bit', especially when there is only 11 of them.

The flags were made a while ago when there was less than 11, we will have to add a few more in the coming days.

For a good list of countries, mostly derived from wikipedia as well, that comes with properties like dependency, disputed, and so on, includes historical data, back to 1970, and whose main purpose, similarly, is a set of flag icons, see OxJS:

https://oxjs.org/#doc/Ox.COUNTRIES

https://oxjs.org/#examples/countries/live

(The latter has a menu to show more than just current sovereign countries.)

Edited to add: In https://trac.oxjs.org/browser/oxjs/tools/geo you'll find the python toolchain to automatically generate the flag images.

I have heard about GoSquared, but have never tried it before. I just signed up and I'm truly amazed. The dashboard view is really useful feature. IMO this is as good as it gets for real-time website analytics. Awesome work guys!

I think it would be awesome if all these flag icons are hosted on a CDN and we can all link to it.

That's a disturbing sense of entitlement. The creators spent 100+ hours on this work and you're asking them to cover the bandwidth costs of hosting it for you?

Eh, I don't think (s)he meant authors should do that. I suppose it's only an idea, shared here with hopes that maybe some HNer will pick it up.

Fair enough. I must just be grumpy this morning.

I find selecting country via flags of a global map to not only be alot quicker than a drop down list, but also more intuative. As somebody who lives in Britian/United Kingdom, then selecting via a flag or mini world map is much easier. Reason being from my point of view is often there is no UK/British option and your slotted in as American English in some forms of language selection. Now if the application ror website wish's to do that behind the scene then fine, but with lists you tend not to have that mapping and on flags or a global map your none the wiser. Also educational value and easier upon all cultures that way, some might prefer there drop down lists on the right, some on the left so this avoids that. All in all it offers more positives as apposed to negatives over dropdown lists for country/flag selection.

So the option to have icons you can freely use without accidently stepping upoon somebodies IP can only be a good thing and counter any arguments about flag copyrights and images. Amazing how even the simplest common items can be copyrighted - swiss clock being one even Apple slipped up upon. So some free ones are always good.

How long did they take to make?

The flags themselves, around 100hrs! We updated the styling and improvements this week which took a few more hours.

Is anyone else surprised that in the age of "retina" displays, these only go up to 64px?

See "How long did they take to make?" comment below.

One of the tags says "vector" so they may be able to produce higher resolution files. That said, I think the @2x should be in there if people want to use these for mobile.

They are @2x up until 32px.

As someone that often designs things that are country / geographically specific this is a great collection. I also like it as an idea to drive traffic to your site. You're on my radar now and the other freebies look pretty slick too. Thanks! Definitely made the right impression.

Here's another set that goes up to 128px: http://icondrawer.com/flag-icons.php

They're free, but require attribution unless you buy a 'royalty-free license.'

Wow, they're beautiful!

Had to look up this one when I saw it was included: http://en.wikipedia.org/wiki/Flag_of_Mars

I have been looking for high quality flag icons like these; I would be definitely using them in the future. Thanks!

Thanks!

Can't find any informations regarding a license (usage) ?!

Don't know if you saw above but they are MIT license and they are going to update the DL files later today.

Yep, sorry it was missing from the start. Should be in the .zip now!

Change log + details added as a .txt in the .zip

Just to let you know that the current .zip doesn't include the change log, just the license. (Caching issue at gosquared?)

These guys have bluntly copied woopra.com

You're right. It was a Friday evening, we got our blunts out, played some Afroman, and said "hey, we're going to stop doing exactly what we've been doing since 2006 and we're going to bluntly copied woopra.com". It's a shame we had to be exposed like this.

I'd love to know how so?

Reply on news.ycombinator.com