This article is special, you may ask why. It is because, in my last article CSS Flag: India, I said-
I am starting a new series called CSS Flag. Where I'll be making different countries' flags starting with India.
I asked myself "Why don't I make an article which will have all 195 countries' flags instead of creating 195 articles?". Well, Here I am.
In this article, I have made all countries' flags by just using HTML and CSS. At the end of the article. You will have a special Bonus (you have to reach the end of the article to see it).
Disclaimer
- The idea of this series came up in my mind on 15 August as I mention in my previous article CSS Flag: India.
- I don't want to hurt anyone's feelings or sentiments through this article. As It could offend some people if their country's flag is slightly off point. I respect every country's flag and its people. If you find any mistakes in any of the flags then please let me know. I'll fix it as soon as possible.
- If there are some issues with Codepen in mobile devices try to switch to the desktop mode or visit through desktop/laptop browsers.
- I have used images (PNG) in some of the flags as well because it was kind of complex to create them.
- The size of each flag is 300x200 pixels. Some of the countries' flags use different sizes. So It could be a little bit different due to the size difference.
Table of Contents:
- Afghanistan
- Albania
- Algeria
- Andorra
- Angola
- Antigua and Barbuda
- Argentina
- Armenia
- Australia
- Austria
- Azerbaijan
- Bahamas
- Bahrain
- Bangladesh
- Barbados
- Belarus
- Belgium
- Belize
- Benin
- Bhutan
- Bolivia
- Bosnia and Herzegovina
- Botswana
- Brazil
- Brunei
- Bulgaria
- Burkina Faso
- Burundi
- Cambodia
- Cameroon
- Canada
- Cape Verde
- Central African
- Chad
- Chile
- China
- Colombia
- Comoros
- Democratic Republic of the Congo
- Republic of the Congo
- Costa Rica
- Croatia
- Cuban
- Cyprus
- Czechia
- Denmark
- Djibouti
- Dominica
- Dominican
- East Timor
- Ecuador
- Egypt
- El Salvador
- Equatorial Guinea
- Eritrea
- Estonia
- Eswatini
- Ethiopia
- Fiji
- Finland
- France
- Gabon
- Gambia
- Georgia
- Germany
- Ghana
- Greece
- Grenada
- Guatemala
- Guinea
- Guinea-Bissau
- Guyana
- Haiti
- Honduras
- Hungary
- Iceland
- India
- Indonesia
- Iran
- Iraq
- Ireland
- Israel
- Italy
- Ivory Coast
- Jamaica
- Japan
- Jordan
- Kazakhstan
- Kenya
- Kiribati
- North Korea
- South Korea
- Kuwait
- Kyrgyzstan
- Laos
- Latvia
- Lebanon
- Lesotho
- Liberia
- Libya
- Liechtenstein
- Lithuania
- Luxembourg
- Madagascar
- Malawi
- Malaysia
- Maldives
- Mali
- Malta
- Marshall Islands
- Mauritania
- Mauritius
- Mexico
- Micronesia
- Moldova
- Monaco
- Mongolia
- Montenegro
- Morocco
- Mozambique
- Myanmar
- Namibia
- Nauru
- Nepal
- Netherland
- New Zealand
- Nicaragua
- Niger
- Nigeria
- North Macedonia
- Norway
- Oman
- Pakistan
- Palau
- Palestine
- Panama
- Papua New Guinea
- Paraguay
- Peru
- Philippines
- Poland
- Portugal
- Qatar
- Romania
- Russia
- Rwanda
- Saint Kitts and Nevis
- Saint Lucia
- Saint Vincent and the Grenadines
- Samoa
- San Marino
- São Tomé and Príncipe
- Saudi Arabia
- Senegal
- Serbia
- Seychelles
- Sierra Leone
- Singapore
- Slovakia
- Slovenia
- Solomon Islands
- Somalia
- South Africa
- South Sudan
- Spain
- Sri Lanka
- Sudan
- Suriname
- Sweden
- Switzerland
- Syria
- Taiwan
- Tajikistan
- Tanzania
- Thailand
- Togo
- Tonga
- Trinidad and Tobago
- Tunisia
- Turkey
- Turkmenistan
- Tuvalu
- Uganda
- Ukraine
- United Arab Emirates
- United Kingdom
- United States
- Uruguay
- Uzbekistan
- Vanuatu
- Vatican City
- Venezuela
- Vietnam
- Yemen
- Zambia
- Zimbabwe
Afghanistan
Albania
Algeria
Andorra
Angola
Antigua and Barbuda
Argentina
Armenia
Australia
Austria
Azerbaijan
Bahamas
Bahrain
Bangladesh
Barbados
Belarus
Belgium
Belize
Benin
Bhutan
Bolivia
Bosnia and Herzegovina
Botswana
Brazil
Brunei
Bulgaria
Burkina Faso
Burundi
Cambodia
Cameroon
Canada
Cape Verde
Central African
Chad
Chile
China
Colombia
Comoros
Democratic Republic of the Congo
Republic of the Congo
Costa Rica
Croatia
Cuban
Cyprus
Czechia
Denmark
Djibouti
Dominica
Dominican
East Timor
Ecuador
Egypt
El Salvador
Equatorial Guinea
Eritrea
Estonia
Eswatini
Ethiopia
Fiji
Finland
France
Gabon
Gambia
Georgia
Germany
Ghana
Greece
Grenada
Guatemala
Guinea
Guinea-Bissau
Guyana
Haiti
Honduras
Hungary
Iceland
India
Indonesia
Iran
Iraq
Ireland
Israel
Italy
Ivory Coast
Jamaica
Japan
Jordan
Kazakhstan
Kenya
Kiribati
North Korea
South Korea
Kuwait
Kyrgyzstan
Laos
Latvia
Lebanon
Lesotho
Liberia
Libya
Liechtenstein
Lithuania
Luxembourg
Madagascar
Malawi
Malaysia
Maldives
Mali
Malta
Marshall Islands
Mauritania
Mauritius
Mexico
Micronesia
Moldova
Monaco
Mongolia
Montenegro
Morocco
Mozambique
Myanmar
Namibia
Nauru
Nepal
Netherland
New Zealand
Nicaragua
Niger
Nigeria
North Macedonia
Norway
Oman
Pakistan
Palau
Palestine
Panama
Papua New Guinea
Paraguay
Peru
Philippines
Poland
Portugal
Qatar
Romania
Russia
Rwanda
Saint Kitts and Nevis
Saint Lucia
Saint Vincent and the Grenadines
Samoa
San Marino
São Tomé and Príncipe
Saudi Arabia
Senegal
Serbia
Seychelles
Sierra Leone
Singapore
Slovakia
Slovenia
Solomon Islands
Somalia
South Africa
South Sudan
Spain
Sri Lanka
Sudan
Suriname
Sweden
Switzerland
Syria
Taiwan
Tajikistan
Tanzania
Thailand
Togo
Tonga
Trinidad and Tobago
Tunisia
Turkey
Turkmenistan
Tuvalu
Uganda
Ukraine
United Arab Emirates
United Kingdom
United States
Uruguay
Uzbekistan
Vanuatu
Vatican City
Venezuela
Vietnam
Yemen
Zambia
Zimbabwe
Bonus
As I told you at the start of the article I'll attach a bonus section. Here it is. You can find all countries' flags in the following Codepen (All in One):
Wrapping up
I have used images in some of the flags as well because it was kind of complex to create them. I hope you enjoyed the article, if you did then don't forget to press ❤️. If you have any queries or suggestions don't hesitate to drop them. You can extend your support by Buying me a Coffee. I'll see you in the next one.
Latest comments (51)
Good job!!!
Nice work, I didn't know about this website seekflag.com, seems useful.
You might already know, but in case you don't, France has a second variant of its flag:
Just so you know, in case you notice a difference somewhere online, you didn't make an error 🙂
Yes, I am aware that France has two flags. I just selected one because they are equivalent. Thanks for the feedback btw. 😊
What a undertake... great job overall 🎉.
But sincerely, svg would do a better and cleaner job than css with images in the real world. However this is a great exercise! Inspired me to try do the Brazilian one without the image... should be possible to get a simpler one.
Yes, svg is the way to go. Try brazilian one and share the link so that people can access that ✨
Did you register today just to answer like this? Phenomenal.
But you said one thing correctly: those are necessary conditions. It doesn't mean they're sufficient.
Since you're so new here, I'll point out that it's called "logic" and it's a favorite among developers.
Call me back when you'll have estabilished foreign affairs with other countries' officials. Oh, many have tried. Have fun.
Wooooaaaa! Jatin, this is soooo dope! 🙌
And holy cow, I remember you saying you were gonna do this:
I'll try to make every country's flag. It's just the beginning :)
Jeez, I thought you just meant that you were gonna do the other 5 I pointed out to you. This is way beyond what I expected. 🤯 You have outdone yourself! 👏👏👏👏👏👏
Thanks so much for creating all these and sharing 'em with us!!
Side note: I also really dig your cover image for this post! 😀
Sometimes I wonder, how do we convert this into SVG?
Manually; see flagmeister.github.io
The title is misleading. I thought you made all the flags using pure CSS and HTML but you actually imported PNG images in half of your flags. You imported PNG images even where you could implement it with pure CSS & HTML relatively easily (example: i.imgur.com/BNJzPa2.png).
If I wanted to have raster graphics in my flags I would just download PNG flags. What's the point to implement only parts with CSS? That does't make any sense to me and, frankly, looks like an attempt to get undeserved attention. You literally wrote in the text:
-- "In this article, I have made all countries' flags by just using HTML and CSS"
which is a lie, sir.
There is a clear disclaimer:-
I have used images (PNG) in some of the flags as well because it was kind of complex to create them.
First of all it's not a disclaimer, but a simple list of notes. Disclaimer is supposed to "disclaim" something. The word is misused here.
Secondly, writing a disclaimer/notes doesn't justify you writing misleading titles or false claims. You can't just write "I've created a sentient robot" and then later in the text add "I didn't really create it, because it's kinda hard".
Okay, I did not write this article, I was just stating the obvious, that there is a Disclaimer which guess what, is titled correctly as "Disclaimer".
There is no reason to hate on what was a pretty amazing feat of writing all the css for most if not all country flags, with sprinkles of png. Sure svg flags are better, but still, pretty amazing that it is all shared in one post. Thank you @j471n
I did recreate (most parts of) 258 flags in SVG... by hand. Back in 2019
took me, I don't know, maybe an hour on average per flag,
and some "extras", just for fun.
It was a PITA. But Hey! My native JavaScript Web Component is only 29 KILO BYTE
Was a fun project to learn how to optimize Web Components.. it wasn't realy about the flags. (and I am not doing updates on wrong flags)
So for highly detailed flags, like Afghanistan, I wrote a fallback to use the major Flag Repos out there.
flagmeister.github.io/
See Result and HTML:
Is my Nigerian flag there? God bless Nigeria.
Yes it is.
Thanks mate :)
The Dominican flag must have blue in the upper left corner and bottom right corner.
It's been fixed now. Thanks for noticing it. 👍
Oh yeah! How can I forget about Gist. Thanks for the help mate. Well, its going to take a while to update all the flags ✨
I thought of using SVG, but I couldn't find a platform to host them online such as imgur. That's the reason I had to use PNG. Are you familiar with any platform to host SVG online?
It was a bit complicated for me to build these kinds of structures with CSS. That's why I went with PNG.
The UK one isn't correct. Here's one I made years ago based on the official specs for the flag.
I misplaced the strips on the UK flag. It's been fixed now. There might be some difference because of the size of the flag, as for all flags I used 300x200 pixel size.
Still not right. Sorry, I'm being a flag pedant 😝
Could you explain a little bit more what's wrong?
It might look weird as it's cropped 300x200
Yes that's right, there are many countries which uses different size flags, but i used fixed size to make them all symmetric in shape.
Squashing mine to fit 300x200 aspect (instead of cropping) gives this:
