CSS Flags

Phoca CSS Flags - world flags rendered by CSS only.

 

Phoca CSS Flags is a CSS library which renders world flags with help of CSS file only. No images are used for rendering the flags.

Demo

aeUnited Arab Emirates
agAntigua And Barbuda
amArmenia
anNetherlands Antilles
atAustria
auAustralia
awAruba
axAaland
azAzerbaijan
baBosnia And Herzegovina
bbBarbados
bdBangladesh
beBelgium
bfBurkina Faso
bgBulgaria
bhBahrain
biBurundi
bjBenin
boBolivia
bsBahamas
bvBouvet Island
bwBotswana
byBelarus
caCanada
cataloniaCatalonia
cdDemocratic Republic Of Congo
cfCentral African Republic
cgCongo
chSwitzerland
ciCote D'ivoire
clChile
cmCameroon
cnChina
coColombia
crCosta Rica
cuCuba
czCzech Republic
deGermany
djDjibouti
dkDenmark
dzAlgeria
eeEstonia
ehWestern Sahara
englandEngland
esSpain
etEthiopia
euEurope
fiFinland
fmFederated States Of Micronesia
foFaroe Islands
frFrance
gaGabon
gbUnited Kingdom
geGeorgia
gfFrench Guiana
ggGuernsey
ghGhana
glGreenland
gmGambia
gnGuinea
gpGuadeloupe
grGreece
gtGuatemala
gwGuinea-bissau
gyGuyana
hkHong Kong
hmHeard Island And Mcdonald Slands
hnHonduras
huHungary
idIndonesia
ieIreland
ilIsrael
inIndia
isIceland
itItaly
jmJamaica
joJordan
jpJapan
keKenya
kmComoros
knSaint Kitts And Nevis
kpNorth Korea
krSouth Korea
kwKuwait
laLaos
lcSaint Lucia
lrLiberia
ltLithuania
luLuxembourg
lvLatvia
lyLibya
maMorocco
mcMonaco
mfSaint Martin
mgMadagascar
mhMarshall Islands
mkMacedonia
mlMali
mnMongolia
mrMauritania
muMauritius
mvMaldives
myMalaysia
naNamibia
nc2New Caledonia
ncNew Caledonia
neNiger
ngNigeria
nlNetherlands
noNorway
nrNauru
paPanama
pePeru
pkPakistan
plPoland
prPuerto Rico
pwPalau
qaQatar
roRomania
rsSerbia
ruRussia
rwRwanda
sbSolomon Islands
scSeychelles
scotlandScotland
sdSudan
seSweden
sgSingapore
sjSvalbard And Jan Mayen
slSierra Leone
snSenegal
soSomalia
srSuriname
stSao Tome And Principe
sySyria
tdChad
tgTogo
thThailand
tmEast Timor
tnTunisia
toTonga
trTurkey
ttTrinidad And Tobago
twRepublic Of China Taiwan
tzTanzania
uaUkraine
umUnited States Minor Outlying Islands
usUnited States
veVenezuela
vnVietnam
wfWallis And Futuna
wsSamoa
zaSouth Africa

 

Using

Using this method (rendering flags only by CSS) has pros and cons. It always depends on how or where such method will be used.

How does it work?

Displaying the flags is based on SVG feature. SVG is XML-based vector image format (see more information: Scalable Vector Graphics). CSS doesn't include a link to the SVG file but it directly includes its source code and renders it as background image.

What are the pros?

  • No need to upload all flag images to the server
  • No additional HTTP requests made as when linking flag images
  • Images are vectors - they are scalable. It means that different sizes can be rendered without losing quality of the image. They are independent to their resolution. Design quality is independent to image size.
  • New flag can be easily added to CSS - just create or download the SVG of the flag, clean it (there are several programs to clean SVG) and encode its code with help of base64, then just add this code to your CSS file. Encoding is needed because of support some internet browsers.

What are the cons?

  • Some obsolete browsers don't support SVG, see: SVG in CSS backgrounds
  • Some browsers don't support including of raw SVG code in CSS, so it must be encoded by e.g. base64 method and the final CSS is then larger.
  • Some of the SVG flags are very large. So including all world flags (over 250 flags) in one CSS doesn't make any sense because the final size of the CSS will be larger than 4 MB (Fortunately, there are different applications where you don't need to include all the world flags. E.g. if you want to list different languages on your site. For English language, over 20 flags can be omitted. Similar to other languages - French, Spanish, ...)

Pro or Con?

  • In some cases, the different rate (relation between width and height) can be a problem. SVG flags are real flags and the rate is different. Some flags have rate 2:1, some 3:2, etc. So flags don't have the same size. The size can be set so that all flags will have the same width or that all will have the same height, but you cannot set that they will have the same width and height (because the rate of the images will be destroyed). On this site, you can see examples, where all the listed flags have the same width. So sometimes the real size (rate) can be a pro, sometime it can be a con. Depends on used design on a website.

When to use the CSS library?

For example, your site renders list of 50 language flags. Then you just need to load one CSS, where the language codes and their attributes are defined.

Of course, you always have to think about it. If it is reasonable to display flags this way. In case you are displaying one or two flags on your site, it doesn't make any sense to load 4 MB CSS file which includes all world flags definitions. But, as written above, most of the large size flags don't need to be included in some cases.

For example:

While making a list of languages you don't need to include Saint-Pierre a Miquelon flag (it is a graphically complex flag and its size is too large) because French is spoken in this self-governing territorial. Including French flag in CSS is sufficient. There are a lot of large size flags which don't need to be included.

This applies to national and civil flags too.

To save the library size, some of the flags can be rendered as civil flags. Mostly there is a big size difference between national and civil flag. National flags include complex characters. Civil flags don't include them. See example:
Spanish national flag (157 023 b) vs. Spanish civil flag (168 b)

There are different SVG files for each flag. In case, you need to reduce the size of CSS file, you can include version of the flag with simplified code, so the final size of CSS will be smaller.

Examples

Example - CSS code of German flag

The following CSS code is responsible for rendering the German flag on the site:

/* germany */
.de {
 background:url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiBoZWlnaHQ9IjYwMCIgdmlld0JveD0iMCAwIDUgMyI+DQo8cGF0aCBkPSJtMCwwaDV2M2gtNXoiLz4NCjxwYXRoIGZpbGw9IiNkMDAiIGQ9Im0wLDFoNXYyaC01eiIvPg0KPHBhdGggZmlsbD0iI2ZmY2UwMCIgZD0ibTAsMmg1djFoLTV6Ii8+DQo8L3N2Zz4NCg==');
 width: 100%;
 height: 60%;
 background-size: 100% 100%;
}

 

Flags with CSS3 gradient effect

Use standard browsers to see these effects.

 

Flags with different size

 

Australia

 

Even more

Of course, you can add your specific SVG icons and extend the class.

 

Download

Be aware, download package includes CSS file with over 250 world flags. Some of the flags definitions are very large. In fact, it is not possible to use whole CSS on the server because of loading issues. It has over 4 MB. You can see the flags on your PC but to use them on your website, you need to select flags. You need to remove flags you are not going to use from the CSS file.

 

CSS in download package includes following flags:

Andorra (ad), United Arab Emirates (ae), Afghanistan (af), Antigua And Barbuda (ag), Anguilla (ai), Albania (al), Armenia (am), Netherlands Antilles (an), Angola (ao), Argentina (ar), American Samoa (as), Austria (at), Australia (au), Aruba (aw), Aaland (ax), Azerbaijan (az), Bosnia And Herzegovina (ba), Basque (basque), Barbados (bb), Bangladesh (bd), Belgium (be), Burkina Faso (bf), Bulgaria (bg), Bahrain (bh), Burundi (bi), Benin (bj), Bermuda (bm), Brunei (bn), Bolivia (bo), Brazil (br), Bahamas (bs), Bhutan (bt), Bouvet Island (bv), Botswana (bw), Belarus (by), Belize (bz), Canada (ca), Catalonia (catalonia), Cocos Islands (cc), Democratic Republic Of Congo (cd), Central African Republic (cf), Congo (cg), Switzerland (ch), Cote D\'ivoire (ci), Cook Islands (ck), Chile (cl), Cameroon (cm), China (cn), Colombia (co), Costa Rica (cr), Serbia And Montenegro (cs), Cuba (cu), Cape Verde (cv), Christmas Island (cx), Cyprus (cy), Czech Republic (cz), Germany (de), Djibouti (dj), Denmark (dk), Dominica (dm), Dominican Republic (do), Algeria (dz), Ecuador (ec), Estonia (ee), Egypt (eg), Western Sahara (eh), England (england), Eritrea (er), Spain (es), Ethiopia (et), Europe (eu), Finland (fi), Fiji (fj), Falkland Islands (fk), Federated States Of Micronesia (fm), Faroe Islands (fo), France (fr), Gabon (ga), Galicia (galicia), United Kingdom (gb), Grenada (gd), Georgia (ge), French Guiana (gf), Guernsey (gg), Ghana (gh), Gibraltar (gi), Greenland (gl), Gambia (gm), Guinea (gn), Guadeloupe (gp), Equatorial Guinea (gq), Greece (gr), South Georgia And South Sandwich Islands (gs), Guatemala (gt), Guam (gu), Guinea-bissau (gw), Guyana (gy), Hong Kong (hk), Heard Island And Mcdonald Slands (hm), Honduras (hn), Croatia (hr), Haiti (ht), Hungary (hu), Indonesia (id), Ireland (ie), Israel (il), Isle Of Man (im), India (in), British Indian Ocean Territory (io), Iraq (iq), Iran (ir), Iceland (is), Italy (it), Jersey (je), Jamaica (jm), Jordan (jo), Japan (jp), Kenya (ke), Kyrgyzstan (kg), Cambodia (kh), Kiribati (ki), Comoros (km), Saint Kitts And Nevis (kn), North Korea (kp), South Korea (kr), Kuwait (kw), Cayman Islands (ky), Kazakhstan (kz), Laos (la), Lebanon (lb), Saint Lucia (lc), Liechtenstein (li), Sri Lanka (lk), Liberia (lr), Lesotho (ls), Lithuania (lt), Luxembourg (lu), Latvia (lv), Libya (ly), Morocco (ma), Monaco (mc), Moldova (md), Montenegro (me), Saint Martin (mf), Madagascar (mg), Marshall Islands (mh), Macedonia (mk), Mali (ml), Myanmar (mm), Mongolia (mn), Macau (mo), Northern Mariana Islands (mp), Martinique (mq), Mauritania (mr), Montserrat (ms), Malta (mt), Mauritius (mu), Maldives (mv), Malawi (mw), Mexico (mx), Malaysia (my), Mozambique (mz), Namibia (na), New Caledonia (nc), Niger (ne), Norfolk Island (nf), Nigeria (ng), Nicaragua (ni), Netherlands (nl), Norway (no), Nepal (np), Nauru (nr), Niue (nu), New Zealand (nz), Oman (om), Panama (pa), Peru (pe), French Polynesia (pf), Papua New Guinea (pg), Philippines (ph), Pakistan (pk), Poland (pl), Saint-pierre And Miquelon (pm), Pitcairn Islands (pn), Puerto Rico (pr), Palestine (ps), Portugal (pt), Palau (pw), Paraguay (py), Qatar (qa), Reunion (re), Romania (ro), Serbia (rs), Russia (ru), Rwanda (rw), Saudi Arabia (sa), Solomon Islands (sb), Seychelles (sc), Scotland (scotland), Sudan (sd), Sweden (se), Singapore (sg), Saint Helena (sh), Slovenia (si), Svalbard And Jan Mayen (sj), Slovakia (sk), Sierra Leone (sl), San Marino (sm), Senegal (sn), Somalia (so), Suriname (sr), Sao Tome And Principe (st), El Salvador (sv), Syria (sy), Swaziland (sz), Turks And Caicos Islands (tc), Chad (td), French Southern And Antarctic Lands (tf), Togo (tg), Thailand (th), Tajikistan (tj), Tokelau (tk), East Timor (tm), Turkmenistan (tm), Tunisia (tn), Tonga (to), Turkey (tr), Trinidad And Tobago (tt), Tuvalu (tv), Republic Of China Taiwan (tw), Tanzania (tz), Ukraine (ua), Uganda (ug), United States Minor Outlying Islands (um), United States (us), Uruguay (uy), Uzbekistan (uz), Vatican City (va), Saint Vincent And Grenadines (vc), Venezuela (ve), British Virgin Islands (vg), United States Virgin Islands (vi), Vietnam (vn), Vanuatu (vu), Wales (wales), Wallis And Futuna (wf), Samoa (ws), Yemen (ye), Mayotte (yt), South Africa (za), Zambia (zm), Zimbabwe (zw)

 

There are two different packages. One where the images have the same width and second where the images have the same height (see the reasons above - different rate of the flags).
Go to download page

Support

If you have any question, if you have any idea or improvement or you just found some bug, please go to Phoca Forum and make a post there. Thank you.

Go to forum page