flag-css
flag-css copied to clipboard
Published
20 hours ago •
7kfpun
7kfpun
CSS for SVG country flags respecting the original ratio.
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
7kfpun