Wednesday, August 15, 2018

World country flags icons set sprite

You know how sometimes you need to add to the application that you do some fancy flags during the language or country selection, well here are they in a nice web optimized sprite ready for use + extra CSS source for their application.





Example use of the CSS in your HTML source:
<div class="flag" id="AFG"></div> Afganistan

The countries selectors are organized by three letters ISO Code




.flag {
    display: inline-block;
    width: 32px;
    height: 32px;
    background: url('flags/small-flags.png') no-repeat;
    opacity: .7;
}

#AFG {
    background-position: -96px 0;
}

#ALB {
    background-position: -192px 0;
}

#DZA {
    background-position: -320px -96px;
}

#ASM {
    background-position: -352px 0;
}

#AND {
    background-position: -32px 0;
}

#AGO {
    background-position: -288px 0;
}

#AIA {
    background-position: -160px 0;
}

#ATG {
    background-position: -128px 0;
}

#ARG {
    background-position: -320px 0;
}

#ARM {
    background-position: -224px 0;
}

#ABW {
    background-position: -448px 0;
}

#AUS, #AUS2, #AUS3, #HMD {
    background-position: -416px 0;
}

#AUT, #AUT2 {
    background-position: -384px 0;
}

#AZE {
    background-position: 0 -32px;
}

#BHS {
    background-position: -480px -32px;
}

#BHR {
    background-position: -224px -32px;
}

#BGD, #BGD2 {
    background-position: -96px -32px;
}

#BRB {
    background-position: -64px -32px;
}

#BLR {
    background-position: -64px -64px;
}

#BEL, #BEL2 {
    background-position: -128px -32px;
}

#BLZ {
    background-position: -96px -64px;
}

#BEN {
    background-position: -288px -32px;
}

#BMU {
    background-position: -352px -32px;
}

#BTN {
    background-position: 0 -64px;
}

#BOL {
    background-position: -416px -32px;
}

#BIH {
    background-position: -32px -32px;
}

#BWA {
    background-position: -32px -64px;
}

#BRA, #BRA2 {
    background-position: -448px -32px;
}

#VGB {
    background-position: -192px -448px;
}

#BRN {
    background-position: -384px -32px;
}

#BGR {
    background-position: -192px -32px;
}

#BFA {
    background-position: -160px -32px;
}

#BDI {
    background-position: -256px -32px;
}

#KHM {
    background-position: 0 -224px;
}

#CMR {
    background-position: -384px -64px;
}

#CAN, #CAN2 {
    background-position: -128px -64px;
}

#CPV {
    background-position: -32px -96px;
}

#CYM {
    background-position: -224px -224px;
}

#CAF {
    background-position: -192px -64px;
}

#TCD {
    background-position: -480px -384px;
}

#CHL {
    background-position: -352px -64px;
}

#CHN, #CHN2, #CHN3, #CHN4, #CHN5, #CHN6 {
    background-position: -416px -64px;
}

#COL, #COL2 {
    background-position: -448px -64px;
}

#COM {
    background-position: -64px -224px;
}

#COD {
    background-position: -160px -64px;
}

#COG {
    background-position: -224px -64px;
}

#COK {
    background-position: -320px -64px;
}

#CRI {
    background-position: -480px -64px;
}

#CIV, #CIV2 {
    background-position: -288px -64px;
}

#HRV {
    background-position: -416px -160px;
}

#CUB {
    background-position: 0 -96px;
}

#CYP, #CYP2 {
    background-position: -96px -96px;
}

#CZE, #CZE2 {
    background-position: -128px -96px;
}

#DNK, #DNK2 {
    background-position: -224px -96px;
}

#DJI {
    background-position: -192px -96px;
}

#DMA {
    background-position: -256px -96px;
}

#DOM {
    background-position: -288px -96px;
}

#TLS {
    background-position: -160px -416px;
}

#ECU {
    background-position: -352px -96px;
}

#EGY {
    background-position: -416px -96px;
}

#SLV {
    background-position: -352px -384px;
}

#GNQ {
    background-position: -128px -160px;
}

#ERI {
    background-position: -480px -96px;
}

#EST, #EST2 {
    background-position: -384px -96px;
}

#ETH {
    background-position: -32px -128px;
}

#FLK {
    background-position: -160px -128px;
}

#FRO {
    background-position: -224px -128px;
}

#FJI {
    background-position: -128px -128px;
}

#FIN, #FIN2 {
    background-position: -96px -128px;
}

#FRA, #FRA2, #REU, #GUF, #ATF, #GLP, #NCL, #MYT, #MAF {
    background-position: -256px -128px;
}

#PYF {
    background-position: -320px -320px;
}

#GAB {
    background-position: -288px -128px;
}

#GMB {
    background-position: -32px -160px;
}

#GEO {
    background-position: -384px -128px;
}

#DEU, #DEU2 {
    background-position: -160px -96px;
}

#GHA {
    background-position: -448px -128px;
}

#GIB {
    background-position: -480px -128px;
}

#GRC, #GRC2 {
    background-position: -160px -160px;
}

#GRL {
    background-position: 0 -160px;
}

#GRD {
    background-position: -352px -128px;
}

#GUM {
    background-position: -256px -160px;
}

#GTM {
    background-position: -224px -160px;
}

#GIN {
    background-position: -64px -160px;
}

#GNB {
    background-position: -288px -160px;
}

#GUY {
    background-position: -320px -160px;
}

#HTI {
    background-position: -448px -160px;
}

#HND {
    background-position: -384px -160px;
}

#HKG {
    background-position: -352px -160px;
}

#HUN, #HUN2 {
    background-position: -480px -160px;
}

#ISL, #ISL2 {
    background-position: -256px -192px;
}

#IND, #IND2 {
    background-position: -160px -192px;
}

#IDN, #IDN2 {
    background-position: -32px -192px;
}

#IRN {
    background-position: -224px -192px;
}

#IRQ {
    background-position: -192px -192px;
}

#IRL, #IRL2 {
    background-position: -64px -192px;
}

#ISR, #ISR2 {
    background-position: -96px -192px;
}

#ITA, #ITA2 {
    background-position: -288px -192px;
}

#JAM {
    background-position: -352px -192px;
}

#JPN, #JPN2 {
    background-position: -416px -192px;
}

#JOR {
    background-position: -384px -192px;
}

#KAZ {
    background-position: -256px -224px;
}

#KEN {
    background-position: -448px -192px;
}

#KIR {
    background-position: -32px -224px;
}

#PRK {
    background-position: -128px -224px;
}

#KOR, #KOR2 {
    background-position: -160px -224px;
}

#KWT {
    background-position: -192px -224px;
}

#KGZ {
    background-position: -480px -192px;
}

#LAO {
    background-position: -288px -224px;
}

#LVA {
    background-position: -64px -256px;
}

#LBN {
    background-position: -320px -224px;
}

#LSO {
    background-position: -480px -224px;
}

#LBR {
    background-position: -448px -224px;
}

#LBY {
    background-position: -96px -256px;
}

#LIE {
    background-position: -384px -224px;
}

#LTU, #LTU2 {
    background-position: 0 -256px;
}

#LUX, #LUX2 {
    background-position: -32px -256px;
}

#MAC {
    background-position: -480px -256px;
}

#MKD {
    background-position: -352px -256px;
}

#MDG {
    background-position: -288px -256px;
}

#MWI {
    background-position: -224px -288px;
}

#MYS, #MYS2 {
    background-position: -288px -288px;
}

#MDV {
    background-position: -192px -288px;
}

#MLI {
    background-position: -384px -256px;
}

#MLT {
    background-position: -128px -288px;
}

#MHL {
    background-position: -320px -256px;
}

#MTQ {
    background-position: -32px -288px;
}

#MRT {
    background-position: -64px -288px;
}

#MUS {
    background-position: -160px -288px;
}

#MEX {
    background-position: -256px -288px;
}

#FSM {
    background-position: -192px -128px;
}

#MDA {
    background-position: -192px -256px;
}

#MCO {
    background-position: -160px -256px;
}

#MNG {
    background-position: -448px -256px;
}

#MNE {
    background-position: -224px -256px;
}

#MSR {
    background-position: -96px -288px;
}

#MAR {
    background-position: -128px -256px;
}

#MOZ {
    background-position: -320px -288px;
}

#MMR {
    background-position: -416px -256px;
}

#MMR2 {
    background-position: -160px -156px;
}

#NAM {
    background-position: -352px -288px;
}

#NRU {
    background-position: -128px -320px;
}

#NPL {
    background-position: -96px -320px;
}

#NLD, #NLD2, #ANT {
    background-position: -256px 0;
}

#NZL {
    background-position: -192px -320px;
}

#NIC {
    background-position: 0 -320px;
}

#NER {
    background-position: -416px -288px;
}

#NGA {
    background-position: -480px -288px;
}

#NIU {
    background-position: -160px -320px;
}

#MNP {
    background-position: 0 -288px;
}

#NOR, #NOR2, #SJM, #BVT {
    background-position: -64px -320px;
}

#OMN {
    background-position: -224px -320px;
}

#PAK {
    background-position: -416px -320px;
}

#PLW {
    background-position: -96px -352px;
}

#PSE {
    background-position: -32px -352px;
}

#PAN {
    background-position: -256px -320px;
}

#PNG {
    background-position: -352px -320px;
}

#PRY {
    background-position: -128px -352px;
}

#PER {
    background-position: -288px -320px;
}

#PHL {
    background-position: -384px -320px;
}

#PCN {
    background-position: -480px -320px;
}

#POL, #POL2 {
    background-position: -448px -320px;
}

#PRT {
    background-position: -64px -352px;
}

#PRI {
    background-position: 0 -352px;
}

#QAT {
    background-position: -160px -352px;
}

#ROU {
    background-position: -224px -352px;
}

#RUS, #RUS2, #RUS3 {
    background-position: -288px -352px;
}

#RWA {
    background-position: -320px -352px;
}

#SHN {
    background-position: -32px -384px;
}

#TDC {
    background-position: -160px -192px;
}

#KNA {
    background-position: -96px -224px;
}

#LCA {
    background-position: -352px -224px;
}

#SPM {
    background-position: -20px -204px;
}

#VCT {
    background-position: -128px -448px;
}

#WSM {
    background-position: -352px -448px;
}

#SMR {
    background-position: -160px -384px;
}

#STP {
    background-position: -320px -384px;
}

#SAU {
    background-position: -352px -352px;
}

#SEN {
    background-position: -192px -384px;
}

#SRB {
    background-position: -256px -352px;
}

#SYC {
    background-position: -416px -352px;
}

#SLE {
    background-position: -128px -384px;
}

#SGP {
    background-position: 0 -384px;
}

#SVK, #SVK2 {
    background-position: -96px -384px;
}

#SVN, #SVN2 {
    background-position: -64px -384px;
}

#SLB {
    background-position: -384px -352px;
}

#SOM {
    background-position: -224px -384px;
}

#ZAF {
    background-position: -448px -448px;
}

#SSD {
    background-position: -288px -384px;
}

#ESP, #ESP2 {
    background-position: 0 -128px;
}

#LKA {
    background-position: -416px -224px;
}

#SDN {
    background-position: -448px -352px;
}

#SUR {
    background-position: -256px -384px;
}

#SWZ {
    background-position: -416px -384px;
}

#SWE, #SWE2 {
    background-position: -480px -352px;
}

#CHE, #CHE2 {
    background-position: -256px -64px;
}

#SYR {
    background-position: -384px -384px;
}

#TWN {
    background-position: -384px -416px;
}

#TJK {
    background-position: -96px -416px;
}

#TZA {
    background-position: -416px -416px;
}

#THA {
    background-position: -64px -416px;
}

#TIBET {
    background-position: -20px -240px;
}

#TLS {
    background-position: -40px -240px;
}

#TLS2 {
    background-position: -40px -240px;
}

#TGO {
    background-position: -32px -416px;
}

#TKL {
    background-position: -128px -416px;
}

#TON {
    background-position: -256px -416px;
}

#TTO {
    background-position: -320px -416px;
}

#TUN {
    background-position: -224px -416px;
}

#TUR {
    background-position: -288px -416px;
}

#TKM {
    background-position: -192px -416px;
}

#TCA {
    background-position: -448px -384px;
}

#TUV {
    background-position: -352px -416px;
}

#UGA {
    background-position: -480px -416px;
}

#UKR {
    background-position: -448px -416px;
}

#ARE {
    background-position: -64px 0;
}

#GBR, #GBR2, #GBR3, #GBR4, #GBR5, #ACI {
    background-position: -320px -128px;
}

#USA, #USA2, #USA3, #USA4, #USA5, #USA6, #USA7, #USA8, #USA9, #USA10, #USA11, #USA12, #USA13, #USA14, #USA15, #USA16 {
    background-position: 0 -448px;
}

#UMI {
    background-position: -120px -252px;
}

#URY {
    background-position: -32px -448px;
}

#UZB {
    background-position: -64px -448px;
}

#VUT {
    background-position: -288px -448px;
}

#VAT {
    background-position: -96px -448px;
}

#VA {
    background-position: 0px -264px;
}

#VEN {
    background-position: -160px -448px;
}

#VNM {
    background-position: -256px -448px;
}

#VIR {
    background-position: -224px -448px;
}

#WLF {
    background-position: -320px -448px;
}

#ESH {
    background-position: -448px -96px;
}

#YEM {
    background-position: -384px -448px;
}

#ZMB {
    background-position: -480px -448px;
}

#ZWE {
    background-position: 0 -480px;
}

#IOT {
    background-position: -180px -264px;
}

#CXR {
    background-position: 0px -276px;
}

#CCK {
    background-position: -20px -276px;
}

#GGY {
    background-position: -416px -128px;
}

#IMN {
    background-position: -128px -192px;
}

#JEY {
    background-position: -320px -192px;
}

#NFK {
    background-position: -448px -288px;
}

#BLM {
    background-position: -320px -32px;
}

#SGS {
    background-position: -192px -160px;
}

#EUR {
    background-position: -64px -128px;
}

#SEG {
    background-position: 0px 0px;
}

No comments:

Post a Comment