flag-icon-css editorconfig Bower Packagist npm

:flags: A collection of all country flags in SVG — plus the CSS for easier integration

flag-icon-css

npm version Bower version

A collection of all country flags in SVG — plus the CSS for easier integration. See the demo.

Usage

For using the flags inline with text add the classes .flag-icon and .flag-icon-xx (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty <span>. If you want to have a squared version flag then add the class flag-icon-squared as well. Example:

<span class="flag-icon flag-icon-gr"></span>
<span class="flag-icon flag-icon-gr flag-icon-squared"></span>

You could also apply this to any element, but in that case you’ll have to use the flag-icon-background instead of flag-icon and you’re set. This will add the correct background with the following CSS properties:

background-size: contain;
background-position: 50%;
background-repeat: no-repeat;

Which means that the flag is just going to appear in the middle of an element, so you will have to set manually the correct size of 4 by 3 ratio or if it’s squared add also the flag-icon-squared class.

Development

Run the npm install to install the dependencies after cloning the project and you’ll be able to:

To watch for changes and live reload if served

$ grunt

To build *.less files

$ grunt build

To serve it on localhost:8000

$ grunt connect

To have only specific countries in the css file, remove the ones that you don’t need from the flag-icon-list.less file and build it again.

Credits

This project wouldn’t exist without the awesome and now deleted collection of SVG flags by koppi.

Related Repositories

flag-icon-css

flag-icon-css

:flags: A collection of all country flags in SVG — plus the CSS for easier integration ...

national_flag

national_flag

national flag icon css sprite ...

yii2-flagicons

yii2-flagicons

:flags: Yii2-flagicons is a Yii2-wrapper around the flag-icon-css-project. With this extension you can easily use vector-based country flags in your Yii2-project. ...

flag-icon-sass

flag-icon-sass

Ruby gem for https://github.com/lipis/flag-icon-css sass version ...

yii2-flag-icon-css

yii2-flag-icon-css

flag-icon-css extension for Yii2 ...


Top Contributors

lipis greenkeeperio-bot mdxs bequadrat markesaaremets oleksmarkh bcaller oller AlexVPopov ickbinhier barrymieny topless g105b martinlindhe paddy2k tiagoporto timhuff

Releases

-   v0.8.1 zip tar
-   1.2.0 zip tar
-   1.1.0 zip tar
-   1.0.0 zip tar
-   0.8.6 zip tar
-   0.8.5 zip tar
-   0.8.4 zip tar
-   0.8.3 zip tar
-   0.8.2 zip tar
-   0.8.1 zip tar
-   0.8.0 zip tar
-   0.7.1 zip tar
-   0.7.0 zip tar
-   0.6.5 zip tar
-   0.6.4 zip tar
-   0.6.3 zip tar
-   0.6.2 zip tar
-   0.6.1 zip tar
-   0.6.0 zip tar
-   0.5.1 zip tar
-   0.5.0 zip tar
-   0.4.0 zip tar
-   0.3.0 zip tar
-   0.2.0 zip tar
-   0.1.0 zip tar