lipis / flag-icons Goto Github PK
View Code? Open in Web Editor NEW:flags: A curated collection of all country flags in SVG — plus the CSS for easier integration
Home Page: https://flagicons.lipis.dev
License: MIT License
:flags: A curated collection of all country flags in SVG — plus the CSS for easier integration
Home Page: https://flagicons.lipis.dev
License: MIT License
Here's how a USA flag should look: http://commons.wikimedia.org/wiki/File:Flag_of_the_United_States.svg
But the proportions in this repo doesn't look right:
https://raw.githubusercontent.com/lipis/flag-icon-css/master/flags/4x3/us.svg
https://raw.githubusercontent.com/lipis/flag-icon-css/master/flags/1x1/us.svg
TIA
I recently used this project within Advanced Custom Fields, allowing a client to choose a flag from a <select>
box, which displays on the front end. I Pulled all the countries into the format that is needed for flag-icon-css to work.
The only thing that is needed is the country code to be lowercase, but easier to do when working within a project.
AF : Afghanistan
AX : Åland Islands
AL : Albania
DZ : Algeria
AS : American Samoa
AD : Andorra
AO : Angola
AI : Anguilla
AQ : Antarctica
AG : Antigua and Barbuda
AR : Argentina
AM : Armenia
AW : Aruba
AU : Australia
AT : Austria
AZ : Azerbaijan
BS : Bahamas (the)
BH : Bahrain
BD : Bangladesh
BB : Barbados
BY : Belarus
BE : Belgium
BZ : Belize
BJ : Benin
BM : Bermuda
BT : Bhutan
BO : Bolivia (Plurinational State of)
BQ : Bonaire, Sint Eustatius and Saba
BA : Bosnia and Herzegovina
BW : Botswana
BV : Bouvet Island
BR : Brazil
IO : British Indian Ocean Territory (the)
BN : Brunei Darussalam
BG : Bulgaria
BF : Burkina Faso
BI : Burundi
CV : Cabo Verde
KH : Cambodia
CM : Cameroon
CA : Canada
KY : Cayman Islands (the)
CF : Central African Republic (the)
TD : Chad
CL : Chile
CN : China
CX : Christmas Island
CC : Cocos (Keeling) Islands (the)
CO : Colombia
KM : Comoros (the)
CD : Congo (the Democratic Republic of the)
CG : Congo (the)
CK : Cook Islands (the)
CR : Costa Rica
CI : Côte d'Ivoire
HR : Croatia
CU : Cuba
CW : Curaçao
CY : Cyprus
CZ : Czech Republic (the)
DK : Denmark
DJ : Djibouti
DM : Dominica
DO : Dominican Republic (the)
EC : Ecuador
EG : Egypt
SV : El Salvador
GQ : Equatorial Guinea
ER : Eritrea
EE : Estonia
ET : Ethiopia
FK : Falkland Islands (the) [Malvinas]
FO : Faroe Islands (the)
FJ : Fiji
FI : Finland
FR : France
GF : French Guiana
PF : French Polynesia
TF : French Southern Territories (the)
GA : Gabon
GM : Gambia (the)
GE : Georgia
DE : Germany
GH : Ghana
GI : Gibraltar
GR : Greece
GL : Greenland
GD : Grenada
GP : Guadeloupe
GU : Guam
GT : Guatemala
GG : Guernsey
GN : Guinea
GW : Guinea-Bissau
GY : Guyana
HT : Haiti
HM : Heard Island and McDonald Islands
VA : Holy See (the)
HN : Honduras
HK : Hong Kong
HU : Hungary
IS : Iceland
IN : India
ID : Indonesia
IR : Iran (Islamic Republic of)
IQ : Iraq
IE : Ireland
IM : Isle of Man
IL : Israel
IT : Italy
JM : Jamaica
JP : Japan
JE : Jersey
JO : Jordan
KZ : Kazakhstan
KE : Kenya
KI : Kiribati
KP : Korea (the Democratic People's Republic of)
KR : Korea (the Republic of)
KW : Kuwait
KG : Kyrgyzstan
LA : Lao People's Democratic Republic (the)
LV : Latvia
LB : Lebanon
LS : Lesotho
LR : Liberia
LY : Libya
LI : Liechtenstein
LT : Lithuania
LU : Luxembourg
MO : Macao
MK : Macedonia (the former Yugoslav Republic of)
MG : Madagascar
MW : Malawi
MY : Malaysia
MV : Maldives
ML : Mali
MT : Malta
MH : Marshall Islands (the)
MQ : Martinique
MR : Mauritania
MU : Mauritius
YT : Mayotte
MX : Mexico
FM : Micronesia (Federated States of)
MD : Moldova (the Republic of)
MC : Monaco
MN : Mongolia
ME : Montenegro
MS : Montserrat
MA : Morocco
MZ : Mozambique
MM : Myanmar
NA : Namibia
NR : Nauru
NP : Nepal
NL : Netherlands (the)
NC : New Caledonia
NZ : New Zealand
NI : Nicaragua
NE : Niger (the)
NG : Nigeria
NU : Niue
NF : Norfolk Island
MP : Northern Mariana Islands (the)
NO : Norway
OM : Oman
PK : Pakistan
PW : Palau
PS : Palestine, State of
PA : Panama
PG : Papua New Guinea
PY : Paraguay
PE : Peru
PH : Philippines (the)
PN : Pitcairn
PL : Poland
PT : Portugal
PR : Puerto Rico
QA : Qatar
RE : Réunion
RO : Romania
RU : Russian Federation (the)
RW : Rwanda
BL : Saint Barthélemy
SH : Saint Helena, Ascension and Tristan da Cunha
KN : Saint Kitts and Nevis
LC : Saint Lucia
MF : Saint Martin (French part)
PM : Saint Pierre and Miquelon
VC : Saint Vincent and the Grenadines
WS : Samoa
SM : San Marino
ST : Sao Tome and Principe
SA : Saudi Arabia
SN : Senegal
RS : Serbia
SC : Seychelles
SL : Sierra Leone
SG : Singapore
SX : Sint Maarten (Dutch part)
SK : Slovakia
SI : Slovenia
SB : Solomon Islands
SO : Somalia
ZA : South Africa
GS : South Georgia and the South Sandwich Islands
SS : South Sudan
ES : Spain
LK : Sri Lanka
SD : Sudan (the)
SR : Suriname
SJ : Svalbard and Jan Mayen
SZ : Swaziland
SE : Sweden
CH : Switzerland
SY : Syrian Arab Republic
TW : Taiwan (Province of China)
TJ : Tajikistan
TZ : Tanzania, United Republic of
TH : Thailand
TL : Timor-Leste
TG : Togo
TK : Tokelau
TO : Tonga
TT : Trinidad and Tobago
TN : Tunisia
TR : Turkey
TM : Turkmenistan
TC : Turks and Caicos Islands (the)
TV : Tuvalu
UG : Uganda
UA : Ukraine
AE : United Arab Emirates (the)
GB : United Kingdom of Great Britain and Northern Ireland (the)
UM : United States Minor Outlying Islands (the)
US : United States of America (the)
UY : Uruguay
UZ : Uzbekistan
VU : Vanuatu
VE : Venezuela (Bolivarian Republic of)
VN : Viet Nam
VG : Virgin Islands (British)
VI : Virgin Islands (U.S.)
WF : Wallis and Futuna
EH : Western Sahara*
YE : Yemen
ZM : Zambia
ZW : Zimbabwe
MF flag (mf.svg) just not be the same as SX, which is the dutch part of Saint Martin Island.
mf.svg should be the same as fr.svg
Hi,
Can you please fix the flag of El Salvador, so that the coat of arms is between the blue stripes, only on the white stripe? Currently it's overflowing on to the blue stripes. Also the blue is the wrong shade...
Reference: https://upload.wikimedia.org/wikipedia/commons/3/34/Flag_of_El_Salvador.svg
Thanks!
Is there a way to use this icon on options in a select form list?
Flags are often used as symbol for languages. What do you think about implementing ISO-639-1 for language flags?
For example:
flag-icon-lang-de
would be the same as flag-icon-de
, but flag-icon-lang-en
would be the same as flag-icon-gb
Hi,
I think, your lib would be more complete if you add the England flag
http://upload.wikimedia.org/wikipedia/en/b/be/Flag_of_England.svg
thanks a lot !
The Belgian flag has the unusual proportions of 13:15, but is rarely seen. A flag in a 2:3 or similar ratio is used in most cases, even by most government bodies.
Is either proportion present?
Hi, it there any way you could add a flag for the European union?
Hello,
Are you looking to add IE8 support, as SVG and background image size are not supported?
It would be good to have some fallbacks for the older browsers.
Unfortunately I didn't have time to implement one, so had to use 'gulp-svg2png' to convert the files to PNGs. In fact upon doing this I noticed another issue that 2 or 3 of the images where missing the xml line from the top of the file, which caused the conversion to crash. Might be something you want to update the images with too.
Thanks
I didn't find some flags:
zr - Zaire
yu - Yugoslavia
uk - United Kingdom
tp - East Timor
Thanks.
Hello,
There is an issue with the flag wrapper, the .flag-icon class, if you want to add a border it is bigger than the flag itself, add a border is useful when you work with white background, they are many flag that have white parts or per example, Japan flag.
At the moment i solved it overridden .flag-icon with it:
// border on the flags
.flag-icon {
border: 1px solid @gray-light;
background-color: @gray-light;
line-height: 0.9em;
text-align: center;
}
it works on all the browsers but it is not a final solution, because like the unit it em, on medium screen the with doesn't match totally.
Hello! This is not an issue, just a question.
How I can make it work on Wordpress? I'm kinda new to all this, and I got lost really quickly when searching about .json packages.
I want to install this in my Wordpress to make it work on a plug-in (it's about hove on a image and making a flag appear, really simple). I don't know if it's possible.
Can you help me? Thank you so much!
Hay lipis,
here is a list of flags which seems to look wrong:
http://lipis.github.io/flag-icon-css/flags/4x3/cc.svg
http://upload.wikimedia.org/wikipedia/commons/7/74/Flag_of_the_Cocos_%28Keeling%29_Islands.svg
http://lipis.github.io/flag-icon-css/flags/4x3/cx.svg
http://de.wikipedia.org/wiki/Datei:Flag_of_Christmas_Island.svg
http://lipis.github.io/flag-icon-css/flags/4x3/pn.svg
http://upload.wikimedia.org/wikipedia/commons/8/88/Flag_of_the_Pitcairn_Islands.svg
http://lipis.github.io/flag-icon-css/flags/4x3/nu.svg
http://upload.wikimedia.org/wikipedia/commons/0/01/Flag_of_Niue.svg
These are the files which I found.
Thanks for all the great work you did! Keep the great work on.
First of all thanks for this great library!
We need a better flag for PRC China. I will submit one if I can find a good & free SVG replacement.
Would be good to indicate/include the license of the flags SVG assets otherwise one may be mislead to believe that they are covered by The MIT License (MIT) of the project and copyright material and original work of Panayiotis Lipiridis. While credit is paid to https://github.com/koppi/iso-country-flags-svg-collection in the README, the link is actually dead.
https://github.com/koppi/iso-country-flags-svg-collection is mentioned in the Readme, but it's 404 (at least, publicly)
Hi, i am implementing this code in my application, and my languages are: hr, en and it.
en
stands for english and I want to show the gb
or us
flag, but I get none using en
.
Could you make something to set a default flag for en
so that I don't have to check in my code whether the language is en and then set us flag or gb flag.
In every application language is en
, it does not make sense that you don't offer a default flag for en
.
Hello,
I have some problem when resizing the flag. It is ok with Chrome, but their is some problems with Firefox 37 or IE 11. By example:
http://asauvez.free.fr/OW/toto.html
It seem it may be corrected if the tag of the flags has an attribute viewBox="0 0 640 480"
(for 4x3. For 1x1, viewBox="0 0 512 512"
):
<svg viewBox="0 0 640 480" id="svg548" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="480" width="640" version="1" y="0" x="0" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/">
http://tympanus.net/codrops/2014/08/19/making-svgs-responsive-with-css/
Thank for your time and continue the good work.
Adrien
Its very hard to find the correct code for a flag if you dont have this country list. I tried to look for it in the example page and in the non minified css, and i couldn't find it.
Can you please add in your bower.json :
"main": [
"./css/flag-icon.min.css"
],
so that the injection in index.html will work
Ca you also change the version in bower.json to the latest one, to avoid bower shouting.
Thanks for this package
Hi,
The Malaysian flag have a wrong stripe and it look like different type of country flag.
Malaysian Flag
http://en.wikipedia.org/wiki/Flag_of_Malaysia
I will try to fix the SVG and try to make a PR
The eu flag is missing
This would be a great addition to my Symfony project, which makes use of Composer to handle the package dependencies.
Any option that this project can be required via Packagist.org ?
Thanks for the great project :) We use it to display the user's country.
It would be great to have the earth flag in here http://www.iflscience.com/space/planet-earth-now-has-flag
We could use it as a default flag when the user doesn't specify any values.
Can I add a flag for Scotland ? It doesn't have a top level code but does have a lower level GB-SCT
http://en.wikipedia.org/wiki/ISO_3166-2:GB
Thanks.
How can I add a new flag?
I tried to add to the css file a new flag-icon-empty and also a new "empty.svg" file but it doesn't work.
Please compare these images:
The first one is from your project and the second one from Wikipedia.
Most if not all flags have strictly defined colors and at least some of the images used in your project seem to be wrong. According to Wikipedia, the flag of Sweden has #006AA7
for blue and #FECC00
for yellow. When compared to https://github.com/lipis/flag-icon-css/blob/master/flags/1x1/se.svg with #003F73
and #FFCC00
respectively, the difference is very noticeable.
I haven't checked but other flag images might have the same problem.
I'm looking for a list of all the abbreviation with there unabbreviated country name beside it. Does a list like this exist.
Is it possible to add a fallback flag in case a country is not available in this package or rather unidentified trough the serverside?
Usage and Developement are understood, but it would be nice to have instructions on how to reference the assets :
<link href="...
<script...
I notice that the version of this on jsDelivr is back at 0.6.0. It would also be wonderful to see this on cdnjs as some of your other work is.
Cheers :)
Didn't found flag of European Union. Would love to have it in this wonderful package. Can we please add it ?
Ref- http://en.wikipedia.org/wiki/File:Flag_of_Europe.svg
For the shake of minimalism I believe that the directories /css and /assets can be merged into one, after all the only source code is under /less
It would be nice to be able to install via NPM, currently it throws errors when I do npm install lipis/flag-icon-css
:
npm ERR! addLocal Could not install /var/folders/6t/5077bgf135d9kwn848lk8z5m0000gn/T/npm-18640-98429318/git-cache-b6b57c9d6dc4/bf0d0e51fa3839d049ffbf4c25b11d7259e4503c
npm ERR! addLocal Could not install /var/folders/6t/5077bgf135d9kwn848lk8z5m0000gn/T/npm-18640-98429318/git-cache-f7cb5d845bea/bf0d0e51fa3839d049ffbf4c25b11d7259e4503c
Hi!
Sigram use icons from this repository (sialan-labs/sigram#3 (comment) ), i detected the venezolan flag is wrong, actual the flag have 8 stars.
It appears that the British Virgin Islands are in there twice. ''vi.svg" should be the US Virgin Islands flag.
Hi, the Spain flag has some issues with the size of the elements.
Actual Spain flag in your project:
Expected:
http://upload.wikimedia.org/wikipedia/commons/thumb/3/3f/Spain_flag_construction_sheet.svg/300px-Spain_flag_construction_sheet.svg.png
Thanks for your great work
The Republic of Kosovo has as Alpha 2 Code xk
. I cannot seem to find that icon or it may be that is just under a different country code, but according to Geo Names it should be xk
.
Could you please verify that it's there or add it if it is not @lipis ? Great pack by the way 👍
The only suggestions I would have is if the icons could be a SVG sprite instead of individual files, that way if you have to use all the flags on the page you have less requests (1 over 250 +), but that is just me :)
As of 2010 Kosovo has been assigned a temporary code XK. While the US are already using code KV
, ISO have yet to assign them a permanent one.
More info:
http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#cite_note-23
http://en.wikipedia.org/wiki/List_of_states_with_limited_recognition
Hi, here https://github.com/cfiorini/flag-icon-sass there is a ruby gem that include sass version of flag-icon-css, may be you add to readme ad related project
thanks
I don't know why, but for sure in my project with bootstrap 2.3.2 and using webkit browsers (Chrome and Safari) in Mac OS X (Yosemite) environment, the flags doesn't works, as they can't be draw. In the same environment, with Firefox all works fine.
I would recommend optimizing SVGs using SVGO.
I've done this for all 4x3 SVGs and saved quite a lot of bits:
Average size saved per file: 50.61%
Total size saved: 33.29%
Total file sizes before:
Before: 4690.31 KiB
After: 3128.94 KiB
Average file size:
Before: 18.84 KiB
After: 12.57 KiB
(Strangely I should mention that aw.svg
and ms.svg
got bigger!)
This could me included in the build process using grunt-svgmin, which internally uses SVGO.
my idea => width="85"
First of all, thanks for this helpful and useful project.
It would be great if it could be downloaded as Bower dependency.
Thanks
Nabil
Any chance of adding Europe flag?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.