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.
Top comments (52)
Unfortunately, some of these contain images and in general they are not scalable (ideally setting something like the font-size on top of them should scale them, but they exclusively use pixels and other absolute units that prevent scaling).
In general, however, great job!
Yes, I have used images and absolute values. This won't make any difference in any of the devices because the container is fixed-sized (I am not scaling any flag and image) and if you are planning to use it for personal work then try to switch to the SVG instead of PNG. :)
Did you implement any type of automation to help get you through all of these? Or did you literally work them all out by hand? If you did all of these by hand, then you have a high degree of patience. Thanks for sharing.
No, I didn't use any automation. i literally code all of them by my hand :)
Impressive
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:
Excellent exercise.
Notably missing: Taiwan.
Taiwan has been added to the list. Thanks for noticing it.
Taiwan Province of China.
no love for Hong Kong?
Taiwan is a de facto sovereign country. It has its own passports, president, parliament, government, elected officials, politics, elections, foreign affairs, police, army that have nothing to do with the People's Republic of China. It deserves to be on this list.
dev.to/j471n/i-made-all-countries-...
and Trentino-Alto Adidgo/Toscana/Sicilia/... ? %)
Taiwan is a part of China.
From the quality of your comparison it's pretty clear that you're quite litigious about this, so I won't comment any further. I won't change my mind, though.
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! 😀
😮 🤯 this is impressive. How did you manage to code so much in such a small span of time ? ... I would have had liked a series rather than all of them at once, because that way I can practice a little bit each time. Regardless, thanks for the article, it will keep me entretained for a long time 👍
I planned to make it as series but later I thought it would be like 195 articles. So, I attached all of them in one place. It was fun to code. I put my other articles and projects on hold for this. Enjoy these 195 codepens 🙂. Now people can access all countries' flags in one article. They don't have to go through the whole series to find a single flag.
It was a bit complicated for me to build these kinds of structures with CSS. That's why I went with PNG.
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 ✨
This is pretty impressive, can imagine how long it took you to do that!
Just one note: since when is the Nepal, Switzerland & Vatican flag a rectangle 🤔
Switzerland's flag has plus sign in the center and that's what I have added. You should try to switch in the desktop mode.
Desktop Mode (image):
Yeah I have seen that, but the Swiss flag is not a rectangle 🇨🇭 compared to others 🇺🇲 😆
About that, I have use the fixed size (300x200) for all the flags. As most of the flags are in rectangular shape and also they will look symmetrical with the same size.