Awesome
Flag-css
CSS for SVG country flag icons with PNG fallback (all alpha-2, alpha-3, numeric, IOC and FIFA are all supported). See the demo.
As a backend developer, I prefer ISO_3166-1 alpha-3.
- Including all world flags (over 250 flags)
- Images are vectors - they are scalable
- All flags from Wikimedia
- Use ISO 3166-1, all alpha-2, alpha-3 and numeric are supported
- IOC and FIFA are also supported
- Respect flag's original ratio
- Flag-css CSS, LESS, and Sass files are licensed under the MIT License
Install
bower:
bower install --save flag-css
Or download
Usage
For using the flags inline with text add the classes .flag with .flag-xxx or .flag-xx (where xxx is the
ISO 3166-1-alpha-3 or ISO 3166-1-numeric and xx is the ISO 3166-1-alpha-2 of a country) to an empty <span>. Or using flag-ioc-xxx or flag-fifa-xxx (where xxx either the IOC or FIFA of a country). Example:
<span class="flag flag-hkg"></span>
<span class="flag flag-hk"></span>
<span class="flag flag-344"></span>
<span class="flag flag-ioc-hkg"></span>
<span class="flag flag-fifa-hkg"></span>
Sizing
<span class="flag flag-hkg flag-2x"></span>
<span class="flag flag-hkg flag-3x"></span>
<span class="flag flag-hkg flag-4x"></span>
⋮
⋮
<span class="flag flag-hkg flag-10x"></span>
Rotating and flipping
<span class="flag flag-hkg flag-rotate-90"></span>
<span class="flag flag-hkg flag-rotate-180"></span>
<span class="flag flag-hkg flag-rotate-270"></span>
<span class="flag flag-hkg flag-flip-horizontal"></span>
<span class="flag flag-hkg flag-flip-vertical"></span>
Flag list
| Flag | Element | Alpha 3 | Alpha 2 | Numeric | IOC | FIFA |
|---|---|---|---|---|---|---|
 | <span class="flag flag-abw"></span> | abw | aw | 533 | aru | aru |
 | <span class="flag flag-afg"></span> | afg | af | 4 | afg | afg |
 | <span class="flag flag-ago"></span> | ago | ao | 24 | ang | ang |
 | <span class="flag flag-aia"></span> | aia | ai | 660 | aia | aia |
 | <span class="flag flag-ala"></span> | ala | ax | 248 | ald | |
 | <span class="flag flag-alb"></span> | alb | al | 8 | alb | alb |
 | <span class="flag flag-and"></span> | and | ad | 20 | and | and |
 | <span class="flag flag-are"></span> | are | ae | 784 | uae | uae |
 | <span class="flag flag-arg"></span> | arg | ar | 32 | arg | arg |
 | <span class="flag flag-arm"></span> | arm | am | 51 | arm | arm |
 | <span class="flag flag-asm"></span> | asm | as | 16 | asa | asa |
 | <span class="flag flag-ata"></span> | ata | aq | 10 | ros | |
 | <span class="flag flag-atf"></span> | atf | tf | 260 | ||
 | <span class="flag flag-atg"></span> | atg | ag | 28 | ant | atg |
 | <span class="flag flag-aus"></span> | aus | au | 36 | aus | aus |
 | <span class="flag flag-aut"></span> | aut | at | 40 | aut | aut |
 | <span class="flag flag-aze"></span> | aze | az | 31 | aze | aze |
 | <span class="flag flag-bdi"></span> | bdi | bi | 108 | bdi | bdi |
 | <span class="flag flag-bel"></span> | bel | be | 56 | bel | bel |
 | <span class="flag flag-ben"></span> | ben | bj | 204 | ben | ben |
 | <span class="flag flag-bes"></span> | bes | bq | 535 | aho | ant |
 | <span class="flag flag-bfa"></span> | bfa | bf | 854 | bur | bfa |
 | <span class="flag flag-bgd"></span> | bgd | bd | 50 | ban | ban |
 | <span class="flag flag-bgr"></span> | bgr | bg | 100 | bul | bul |
 | <span class="flag flag-bhr"></span> | bhr | bh | 48 | brn | bhr |
 | <span class="flag flag-bhs"></span> | bhs | bs | 44 | bah | bah |
 | <span class="flag flag-bih"></span> | bih | ba | 70 | bih | bih |
 | <span class="flag flag-blm"></span> | blm | bl | 652 | ||
 | <span class="flag flag-blr"></span> | blr | by | 112 | blr | blr |
 | <span class="flag flag-blz"></span> | blz | bz | 84 | biz | blz |
 | <span class="flag flag-bmu"></span> | bmu | bm | 60 | ber | ber |
 | <span class="flag flag-bol"></span> | bol | bo | 68 | bol | bol |
 | <span class="flag flag-bra"></span> | bra | br | 76 | bra | bra |
 | <span class="flag flag-brb"></span> | brb | bb | 52 | bar | brb |
 | <span class="flag flag-brn"></span> | brn | bn | 96 | bru | bru |
 | <span class="flag flag-btn"></span> | btn | bt | 64 | bhu | bhu |
 | <span class="flag flag-bvt"></span> | bvt | bv | 74 | ||
 | <span class="flag flag-bwa"></span> | bwa | bw | 72 | bot | bot |
 | <span class="flag flag-caf"></span> | caf | cf | 140 | caf | cta |
 | <span class="flag flag-can"></span> | can | ca | 124 | can | can |
 | <span class="flag flag-cck"></span> | cck | cc | 166 | cck | |
 | <span class="flag flag-che"></span> | che | ch | 756 | sui | sui |
 | <span class="flag flag-chl"></span> | chl | cl | 152 | chi | chi |
 | <span class="flag flag-chn"></span> | chn | cn | 156 | chn | chn |
 | <span class="flag flag-civ"></span> | civ | ci | 384 | civ | civ |
 | <span class="flag flag-cmr"></span> | cmr | cm | 120 | cmr | cmr |
 | <span class="flag flag-cod"></span> | cod | cd | 180 | cod | cod |
 | <span class="flag flag-cog"></span> | cog | cg | 178 | cgo | cgo |
 | <span class="flag flag-cok"></span> | cok | ck | 184 | cok | cok |
 | <span class="flag flag-col"></span> | col | co | 170 | col | col |
 | <span class="flag flag-com"></span> | com | km | 174 | com | com |
 | <span class="flag flag-cpv"></span> | cpv | cv | 132 | cpv | cpv |
 | <span class="flag flag-cri"></span> | cri | cr | 188 | crc | crc |
 | <span class="flag flag-cub"></span> | cub | cu | 192 | cub | cub |
 | <span class="flag flag-cuw"></span> | cuw | cw | 531 | ||
 | <span class="flag flag-cxr"></span> | cxr | cx | 162 | cxr | |
 | <span class="flag flag-cym"></span> | cym | ky | 136 | cay | cay |
 | <span class="flag flag-cyp"></span> | cyp | cy | 196 | cyp | cyp |
 | <span class="flag flag-cze"></span> | cze | cz | 203 | cze | cze |
 | <span class="flag flag-deu"></span> | deu | de | 276 | ger | ger |
 | <span class="flag flag-dji"></span> | dji | dj | 262 | dji | dji |
 | <span class="flag flag-dma"></span> | dma | dm | 212 | dma | dma |
 | <span class="flag flag-dnk"></span> | dnk | dk | 208 | den | den |
 | <span class="flag flag-dom"></span> | dom | do | 214 | dom | dom |
 | <span class="flag flag-dza"></span> | dza | dz | 12 | alg | alg |
 | <span class="flag flag-ecu"></span> | ecu | ec | 218 | ecu | ecu |
 | <span class="flag flag-egy"></span> | egy | eg | 818 | egy | egy |
 | <span class="flag flag-eri"></span> | eri | er | 232 | eri | eri |
 | <span class="flag flag-esh"></span> | esh | eh | 732 | sah | |
 | <span class="flag flag-esp"></span> | esp | es | 724 | esp | esp |
 | <span class="flag flag-est"></span> | est | ee | 233 | est | est |
 | <span class="flag flag-eth"></span> | eth | et | 231 | eth | eth |
 | <span class="flag flag-fin"></span> | fin | fi | 246 | fin | fin |
 | <span class="flag flag-fji"></span> | fji | fj | 242 | fij | fij |
 | <span class="flag flag-flk"></span> | flk | fk | 238 | flk | flk |
 | <span class="flag flag-fra"></span> | fra | fr | 250 | fra | fra |
 | <span class="flag flag-fro"></span> | fro | fo | 234 | far | fro |
 | <span class="flag flag-fsm"></span> | fsm | fm | 583 | fsm | fsm |
 | <span class="flag flag-gab"></span> | gab | ga | 266 | gab | gab |
 | <span class="flag flag-gbr"></span> | gbr | gb | 826 | gbr | |
 | <span class="flag flag-geo"></span> | geo | ge | 268 | geo | geo |
 | <span class="flag flag-ggy"></span> | ggy | gg | 831 | gbg | |
 | <span class="flag flag-gha"></span> | gha | gh | 288 | gha | gha |
 | <span class="flag flag-gib"></span> | gib | gi | 292 | gib | gbz |
 | <span class="flag flag-gin"></span> | gin | gn | 324 | gui | gui |
 | <span class="flag flag-glp"></span> | glp | gp | 312 | gud | glp |
 | <span class="flag flag-gmb"></span> | gmb | gm | 270 | gam | gam |
 | <span class="flag flag-gnb"></span> | gnb | gw | 624 | gbs | gnb |
 | <span class="flag flag-gnq"></span> | gnq | gq | 226 | geq | eqg |
 | <span class="flag flag-grc"></span> | grc | gr | 300 | gre | gre |
 | <span class="flag flag-grd"></span> | grd | gd | 308 | grn | grn |
 | <span class="flag flag-grl"></span> | grl | gl | 304 | grl | grl |
 | <span class="flag flag-gtm"></span> | gtm | gt | 320 | gua | gua |
 | <span class="flag flag-guf"></span> | guf | gf | 254 | fgu | guf |
 | <span class="flag flag-gum"></span> | gum | gu | 316 | gum | gum |
 | <span class="flag flag-guy"></span> | guy | gy | 328 | guy | guy |
 | <span class="flag flag-hkg"></span> | hkg | hk | 344 | hkg | hkg |
 | <span class="flag flag-hmd"></span> | hmd | hm | 334 | ||
 | <span class="flag flag-hnd"></span> | hnd | hn | 340 | hon | hon |
 | <span class="flag flag-hrv"></span> | hrv | hr | 191 | cro | cro |
 | <span class="flag flag-hti"></span> | hti | ht | 332 | hai | hai |
 | <span class="flag flag-hun"></span> | hun | hu | 348 | hun | hun |
 | <span class="flag flag-idn"></span> | idn | id | 360 | ina | idn |
 | <span class="flag flag-imn"></span> | imn | im | 833 | gbm | |
 | <span class="flag flag-ind"></span> | ind | in | 356 | ind | ind |
 | <span class="flag flag-iot"></span> | iot | io | 86 | ||
 | <span class="flag flag-irl"></span> | irl | ie | 372 | irl | irl |
 | <span class="flag flag-irn"></span> | irn | ir | 364 | iri | irn |
 | <span class="flag flag-irq"></span> | irq | iq | 368 | irq | irq |
 | <span class="flag flag-isl"></span> | isl | is | 352 | isl | isl |
 | <span class="flag flag-isr"></span> | isr | il | 376 | isr | isr |
 | <span class="flag flag-ita"></span> | ita | it | 380 | ita | ita |
 | <span class="flag flag-jam"></span> | jam | jm | 388 | jam | jam |
 | <span class="flag flag-jey"></span> | jey | je | 832 | gbj | |
 | <span class="flag flag-jor"></span> | jor | jo | 400 | jor | jor |
 | <span class="flag flag-jpn"></span> | jpn | jp | 392 | jpn | jpn |
 | <span class="flag flag-kaz"></span> | kaz | kz | 398 | kaz | kaz |
 | <span class="flag flag-ken"></span> | ken | ke | 404 | ken | ken |
 | <span class="flag flag-kgz"></span> | kgz | kg | 417 | kgz | kgz |
 | <span class="flag flag-khm"></span> | khm | kh | 116 | cam | cam |
 | <span class="flag flag-kir"></span> | kir | ki | 296 | kir | kir |
 | <span class="flag flag-kna"></span> | kna | kn | 659 | skn | skn |
 | <span class="flag flag-kor"></span> | kor | kr | 410 | kor | kor |
 | <span class="flag flag-kwt"></span> | kwt | kw | 414 | kuw | kuw |
 | <span class="flag flag-lao"></span> | lao | la | 418 | lao | lao |
 | <span class="flag flag-lbn"></span> | lbn | lb | 422 | lib | lib |
 | <span class="flag flag-lbr"></span> | lbr | lr | 430 | lbr | lbr |
 | <span class="flag flag-lby"></span> | lby | ly | 434 | lba | lby |
 | <span class="flag flag-lca"></span> | lca | lc | 662 | lca | lca |
 | <span class="flag flag-lie"></span> | lie | li | 438 | lie | lie |
 | <span class="flag flag-lka"></span> | lka | lk | 144 | sri | sri |
 | <span class="flag flag-lso"></span> | lso | ls | 426 | les | les |
 | <span class="flag flag-ltu"></span> | ltu | lt | 440 | ltu | ltu |
 | <span class="flag flag-lux"></span> | lux | lu | 442 | lux | lux |
 | <span class="flag flag-lva"></span> | lva | lv | 428 | lat | lva |
 | <span class="flag flag-mac"></span> | mac | mo | 446 | mac | mac |
 | <span class="flag flag-maf"></span> | maf | mf | 663 | ||
 | <span class="flag flag-mar"></span> | mar | ma | 504 | mar | mar |
 | <span class="flag flag-mco"></span> | mco | mc | 492 | mon | mon |
 | <span class="flag flag-mda"></span> | mda | md | 498 | mda | mda |
 | <span class="flag flag-mdg"></span> | mdg | mg | 450 | mad | mad |
 | <span class="flag flag-mdv"></span> | mdv | mv | 462 | mdv | mdv |
 | <span class="flag flag-mex"></span> | mex | mx | 484 | mex | mex |
 | <span class="flag flag-mhl"></span> | mhl | mh | 584 | msh | mhl |
 | <span class="flag flag-mkd"></span> | mkd | mk | 807 | mkd | mkd |
 | <span class="flag flag-mli"></span> | mli | ml | 466 | mli | mli |
 | <span class="flag flag-mlt"></span> | mlt | mt | 470 | mlt | mlt |
 | <span class="flag flag-mmr"></span> | mmr | mm | 104 | mya | mya |
 | <span class="flag flag-mne"></span> | mne | me | 499 | mgo | mne |
 | <span class="flag flag-mng"></span> | mng | mn | 496 | mgl | mng |
 | <span class="flag flag-mnp"></span> | mnp | mp | 580 | nma | nmi |
 | <span class="flag flag-moz"></span> | moz | mz | 508 | moz | moz |
 | <span class="flag flag-mrt"></span> | mrt | mr | 478 | mtn | mtn |
 | <span class="flag flag-msr"></span> | msr | ms | 500 | mnt | msr |
 | <span class="flag flag-mtq"></span> | mtq | mq | 474 | mrt | mtq |
 | <span class="flag flag-mus"></span> | mus | mu | 480 | mri | mri |
 | <span class="flag flag-mwi"></span> | mwi | mw | 454 | maw | mwi |
 | <span class="flag flag-mys"></span> | mys | my | 458 | mas | mas |
 | <span class="flag flag-myt"></span> | myt | yt | 175 | may | myt |
 | <span class="flag flag-nam"></span> | nam | na | 516 | nam | nam |
 | <span class="flag flag-ncl"></span> | ncl | nc | 540 | ncd | ncl |
 | <span class="flag flag-ner"></span> | ner | ne | 562 | nig | nig |
 | <span class="flag flag-nfk"></span> | nfk | nf | 574 | nfi | nfk |
 | <span class="flag flag-nga"></span> | nga | ng | 566 | ngr | nga |
 | <span class="flag flag-nic"></span> | nic | ni | 558 | nca | nca |
 | <span class="flag flag-niu"></span> | niu | nu | 570 | niu | niu |
 | <span class="flag flag-nld"></span> | nld | nl | 528 | ned | ned |
 | <span class="flag flag-nor"></span> | nor | no | 578 | nor | nor |
 | <span class="flag flag-npl"></span> | npl | np | 524 | nep | nep |
 | <span class="flag flag-nru"></span> | nru | nr | 520 | nru | nru |
 | <span class="flag flag-nzl"></span> | nzl | nz | 554 | nzl | nzl |
 | <span class="flag flag-omn"></span> | omn | om | 512 | oma | oma |
 | <span class="flag flag-pak"></span> | pak | pk | 586 | pak | pak |
 | <span class="flag flag-pan"></span> | pan | pa | 591 | pan | pan |
 | <span class="flag flag-pcn"></span> | pcn | pn | 612 | pcn | |
 | <span class="flag flag-per"></span> | per | pe | 604 | per | per |
 | <span class="flag flag-phl"></span> | phl | ph | 608 | phi | phi |
 | <span class="flag flag-plw"></span> | plw | pw | 585 | plw | plw |
 | <span class="flag flag-png"></span> | png | pg | 598 | png | png |
 | <span class="flag flag-pol"></span> | pol | pl | 616 | pol | pol |
 | <span class="flag flag-pri"></span> | pri | pr | 630 | pur | pur |
 | <span class="flag flag-prk"></span> | prk | kp | 408 | prk | prk |
 | <span class="flag flag-prt"></span> | prt | pt | 620 | por | por |
 | <span class="flag flag-pry"></span> | pry | py | 600 | par | par |
 | <span class="flag flag-pse"></span> | pse | ps | 275 | ple | ple |
 | <span class="flag flag-pyf"></span> | pyf | pf | 258 | fpo | tah2 |
 | <span class="flag flag-qat"></span> | qat | qa | 634 | qat | qat |
 | <span class="flag flag-reu"></span> | reu | re | 638 | reu | reu |
 | <span class="flag flag-rou"></span> | rou | ro | 642 | rou | rou |
 | <span class="flag flag-rus"></span> | rus | ru | 643 | rus | rus |
 | <span class="flag flag-rwa"></span> | rwa | rw | 646 | rwa | rwa |
 | <span class="flag flag-sau"></span> | sau | sa | 682 | ksa | ksa |
 | <span class="flag flag-sdn"></span> | sdn | sd | 729 | sud | sud |
 | <span class="flag flag-sen"></span> | sen | sn | 686 | sen | sen |
 | <span class="flag flag-sgp"></span> | sgp | sg | 702 | sin | sin |
 | <span class="flag flag-sgs"></span> | sgs | gs | 239 | ||
 | <span class="flag flag-shn"></span> | shn | sh | 654 | hel | shn |
 | <span class="flag flag-sjm"></span> | sjm | sj | 744 | ||
 | <span class="flag flag-slb"></span> | slb | sb | 90 | sol | sol |
 | <span class="flag flag-sle"></span> | sle | sl | 694 | sle | sle |
 | <span class="flag flag-slv"></span> | slv | sv | 222 | esa | slv |
 | <span class="flag flag-smr"></span> | smr | sm | 674 | smr | smr |
 | <span class="flag flag-som"></span> | som | so | 706 | som | som |
 | <span class="flag flag-spm"></span> | spm | pm | 666 | spm | spm |
 | <span class="flag flag-srb"></span> | srb | rs | 688 | srb | srb |
 | <span class="flag flag-ssd"></span> | ssd | ss | 728 | ||
 | <span class="flag flag-stp"></span> | stp | st | 678 | stp | stp |
 | <span class="flag flag-sur"></span> | sur | sr | 740 | sur | sur |
 | <span class="flag flag-svk"></span> | svk | sk | 703 | svk | svk |
 | <span class="flag flag-svn"></span> | svn | si | 705 | slo | svn |
 | <span class="flag flag-swe"></span> | swe | se | 752 | swe | swe |
 | <span class="flag flag-swz"></span> | swz | sz | 748 | swz | swz |
 | <span class="flag flag-sxm"></span> | sxm | sx | 534 | ||
 | <span class="flag flag-syc"></span> | syc | sc | 690 | sey | sey |
 | <span class="flag flag-syr"></span> | syr | sy | 760 | syr | syr |
 | <span class="flag flag-tca"></span> | tca | tc | 796 | tks | tca |
 | <span class="flag flag-tcd"></span> | tcd | td | 148 | cha | cha |
 | <span class="flag flag-tgo"></span> | tgo | tg | 768 | tog | tog |
 | <span class="flag flag-tha"></span> | tha | th | 764 | tha | tha |
 | <span class="flag flag-tjk"></span> | tjk | tj | 762 | tjk | tjk |
 | <span class="flag flag-tkl"></span> | tkl | tk | 772 | tkl | |
 | <span class="flag flag-tkm"></span> | tkm | tm | 795 | tkm | tkm |
 | <span class="flag flag-tls"></span> | tls | tl | 626 | tls | tls |
 | <span class="flag flag-ton"></span> | ton | to | 776 | tga | tga |
 | <span class="flag flag-tto"></span> | tto | tt | 780 | tto | tri |
 | <span class="flag flag-tun"></span> | tun | tn | 788 | tun | tun |
 | <span class="flag flag-tur"></span> | tur | tr | 792 | tur | tur |
 | <span class="flag flag-tuv"></span> | tuv | tv | 798 | tuv | tuv |
 | <span class="flag flag-twn"></span> | twn | tw | 158 | tpe | tpe |
 | <span class="flag flag-tza"></span> | tza | tz | 834 | tan | tan |
 | <span class="flag flag-uga"></span> | uga | ug | 800 | uga | uga |
 | <span class="flag flag-ukr"></span> | ukr | ua | 804 | ukr | ukr |
 | <span class="flag flag-umi"></span> | umi | um | 581 | ||
 | <span class="flag flag-ury"></span> | ury | uy | 858 | uru | uru |
 | <span class="flag flag-usa"></span> | usa | us | 840 | usa | usa |
 | <span class="flag flag-uzb"></span> | uzb | uz | 860 | uzb | uzb |
 | <span class="flag flag-vat"></span> | vat | va | 336 | vat | |
 | <span class="flag flag-vct"></span> | vct | vc | 670 | vin | vin |
 | <span class="flag flag-ven"></span> | ven | ve | 862 | ven | ven |
 | <span class="flag flag-vgb"></span> | vgb | vg | 92 | ivb | vgb |
 | <span class="flag flag-vir"></span> | vir | vi | 850 | isv | vir |
 | <span class="flag flag-vnm"></span> | vnm | vn | 704 | vie | vie |
 | <span class="flag flag-vut"></span> | vut | vu | 548 | van | van |
 | <span class="flag flag-wlf"></span> | wlf | wf | 876 | waf | wlf |
 | <span class="flag flag-wsm"></span> | wsm | ws | 882 | sam | sam |
 | <span class="flag flag-yem"></span> | yem | ye | 887 | yem | yem |
 | <span class="flag flag-zaf"></span> | zaf | za | 710 | rsa | rsa |
 | <span class="flag flag-zmb"></span> | zmb | zm | 894 | zam | zam |
 | <span class="flag flag-zwe"></span> | zwe | zw | 716 | zim | zim |
Todo's
- 3×4 flag ratio available
License
MIT
Development
Ubuntu:
apt-get install imagemagick
apt-get install graphicsmagick
Mac OS X (using Homebrew):
brew install imagemagick
brew install graphicsmagick