Free SVG Country Flags: Flag Icons CSS Collection

I frequently need to create language selector and country selector in my projects. But looking for flags is always a nightmare. Agent either remembers them wrong or I waste time finding correct SVG.

Fortunately, I found a collection which works perfect. It contains all country flags in SVG format and provides CSS to implement them easily. This collection has over 12 000 stars on github and represents all existing countries.

It’s described as “A curated collection of all country flags in SVG — plus the CSS for easier integration.” Which means, you need to include only one CDN link into your website and you will be able to show any flag with span element and two letter country code. Demo page with all flags is here flagicons.lipis.dev .

1How to add country flags to your website

Once you include this CDN link into the head tag of your web page. You will be able to use all flags from the collection.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/lipis/[email protected]/css/flag-icons.min.css">

Then, you can display any flag with two classes on the span tag. First class is fi and the second is fi- with a two letter iso country code. For the USA this is fi-us, for Germany — fi-de, for Japan — fi-jp etc. Since flags are SVG images, they will scale well in any size.

<span class="fi fi-us"></span>  <!-- United States -->
<span class="fi fi-de"></span>  <!-- Germany -->
<span class="fi fi-jp"></span>  <!-- Japan -->

I usually ask agent to implement language selector into the header of a web page. Then, use flag-icons collection via CDN and show the flag of each country near their name. For example, you have English — USA flag, Russian — Russia flag and German — Germany flag. Agent already knows country codes and will place everything correctly.

2What flags are included in the collection

This collection uses ISO 3166-1-alpha-2 codes. This is an internationally recognised two letter notation for countries, developed by the United Nations. As for design, there are two variants: traditional 4x3 rectangle and square flag (with fis class on span). Flags are SVG images, so they will look good on any screen resolution.