Flag Icons



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

For using the flags inline with text add the classes .flag-icon and .flag-icon-xxx (where xxx is the ISO 3166-1-alpha-3 code 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-sun"></span>
        <span class="flag-icon flag-icon-sun 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.

Many thanks to Lipis for his repository, from which almost all the content was taken. Some flags have been added or changed.

The alpha-2 code for alpha-3 has been replaced, and for some regions have been added alpha-3 like codes.

The project is compiled using SASS.

List of flags