.flag-icon { background-size: contain; background-position: 50%; background-repeat: no-repeat; position: relative; display: inline-block; height: 24px; width: 24px; &:before { content: '\00a0'; } } // https://github.com/HatScripts/circle-flags/tree/master/flags @mixin flag-icon($country) { .flag-icon-#{$country} { background-image: url('../images/flags/#{$country}.svg'); } } $countries: gb ru cn; @each $country in $countries { @include flag-icon($country); }