Vector flags with CSS & SVG only v2.18.6

You'll get all of 206 national flags of states in membership within the United Nations System (193 member states, two observer states, and 11 other states) — all optimized for speed and no hassle. Download now or get started with the docs!

Inspired by the Font Awesome toolkit, you can place vector flags just about anywhere with the italic type tag <i>. Looking to quickly add Vector Flag Icons to your project? Copy-paste the stylesheet <link> into your <head>.

<link href="https://media.zeise.cloud/vector-flag-icons/css/slim.css" rel="stylesheet"/>

Wrap inline snippets of code with <i> and officially assigned code elements.

We use ISO 3166-1 alpha-2 codes in lowercase. These codes are two-letter country codes defined in ISO 3166-1, part of the ISO 3166 standard published by the International Organization for Standardization (ISO), to represent countries, dependent territories, and special areas of geographical interest.

State flag with original ratio and two-letter country code:

For example we want the national flag of Antigua and Barbuda to visual in web content. The two-letter country code is AG. We enter this code in lowercase into our inline element. When we are done, the result can be shown: Holy Sugarcane! 🍹
<i class="fl fl-ag"></i>
Switzerland, officially the Swiss Confederation, is a federal republic in Europe, but notably not part of the European Union or the European Economic Area.
<i class="fl fl-ch"></i>
<i class="fl fl-eu"></i>

Fixed width

Use fl-fw to set centered flags at a fixed width. Great to use when different flag ratios throw off alignment. Especially useful in things like nav lists and list groups.

  • American English
  • Australian English
  • British English
  • Canadian English
  • Swiss German
<ul>
<li><i class="fl fl-us fl-fw"></i>American English</li>
<li><i class="fl fl-au fl-fw"></i>Australian English</li>
<li><i class="fl fl-uk fl-fw"></i>British English</li>
<li><i class="fl fl-ca fl-fw"></i>Canadian English</li>
<li><i class="fl fl-ch fl-fw"></i>Swiss German</li>
</ul>

Alignment within the fixed width

If you like to change the alignment within the fixed width, use additionally fl-fw-l (left-aligned) or fl-fw-r (right-aligned) to the existing fl-fw class.

  • Left-aligned flag of Vatican City
  • Centered flag of Switzerland
  • Right-aligned flag of Vatican City
  • Canada's flag needs the full width
<ul>
<li><i class="fl fl-va fl-fw fl-fw-l"></i>Left-aligned flag</li>
<li><i class="fl fl-ch fl-fw"></i>Centered flag</li>
<li><i class="fl fl-va fl-fw fl-fw-r"></i>Right-aligned flag</li>
</ul>

Border and shadow

To increase the contrast to the background, you can add a border fl-border, fl-border-dark, fl-border-light or a shadow fl-shadow to the flag.

A white colored flag within a frame used on a light background-color,
Cyprus — Republic of Cyprus
Japan — Land of the Rising Sun
<i class="fl fl-cy fl-border"></i>
… colored flag on the same background-color with a dark frame fl-border-dark
Niue is an island country in the South Pacific Ocean, 2,400 kilometres (1,500 mi) northeast of New Zealand.
<i class="fl fl-nu fl-border-dark"></i>
… or with a light frame fl-border-light.
The Flag of Europe or European Flag is an official symbol of two separate organisations—the Council of Europe (CoE) and the European Union (EU).
<i class="fl fl-eu fl-border-light"></i>
Alternatively, you can use a smooth shadow.
--→
<i class="fl fl-jp fl-shadow"></i>

Circle, square, and rounded corners

Add classes to a flag to easily round its corners. Either add fl-circle class to a flag and it appears as a bubble icon, fl-radius to round off the flag or fl-square for squared rectangle with/without radius. Good for a country selector or menu on multilingual websites:

  • 中国
  • 香港
  • 日本
  • ćľłé–€
  • 대한민국
<ul>
<li><i class="fl fl-cn fl-circle"></i></li>
<li><i class="fl fl-hk fl-circle"></i></li>
<li><i class="fl fl-jp fl-circle"></i></li>
<li><i class="fl fl-mo fl-circle"></i></li>
<li><i class="fl fl-kr fl-circle"></i></li>
</ul>
  • Argentina
  • Brazil
  • Canada
  • MĂ©xico
  • United States
<ul>
<li><i class="fl fl-ar fl-radius"></i></li>
<li><i class="fl fl-br fl-radius"></i></li>
<li><i class="fl fl-ca fl-radius"></i></li>
<li><i class="fl fl-mx fl-radius"></i></li>
<li><i class="fl fl-us fl-radius"></i></li>
</ul>
  • Danmark
  • Suomi
  • ĂŤsland
  • Norge
  • Sverige
<ul>
<li><i class="fl fl-dk fl-square"></i></li>
<li><i class="fl fl-fi fl-square"></i></li>
<li><i class="fl fl-is fl-square"></i></li>
<li><i class="fl fl-no fl-square"></i></li>
<li><i class="fl fl-se fl-square"></i></li>
</ul>

Spacing with Bootstrap 4

Use the margin spacing utilities to control how elements and components are spaced and sized. We recommend Bootstrap 4. This framework includes a five-level (1 to 5) scale for spacing utilities, based on a 1rem value default. You can add ml-x for left margin to text, mr-x for right margin or mx-x for both.

Flag of Sweden

Flag of Europe

<i class="fl fl-se ml-2"></i>
<i class="fl fl-eu mr-2"></i>
The “D-A-CH” countries:
<p>Your text
<i class="fl fl-de mx-2"></i>
<i class="fl fl-at mx-2"></i>
<i class="fl fl-ch mx-2"></i>
</p>

What does D-A-CH mean? D-A-CH is an acronym used to represent the dominant states of the German language and it is based on the international vehicle registration codes for Germany (D), Austria (A) and Switzerland (CH). “Dach” is also the German word for “roof”, and is used in linguistics in the term “Dachsprache” (roofing language), which standard German arguably is in relation to some outlying dialects of German, especially in Austria, Switzerland, Luxembourg and France.

...

Please choose an United Nations region or another list of flags by the dropdown menu to load the gallery.

Copyright © 2001–2018 Christian Zeise, 2004–2018 Pottval & Zeise Media

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

  • 206 civil national flags of states in membership within UN system
  • proportional relationship (same height)
  • alignment (centered flags at a fixed width of 1:2)
slim
  • like the slim files download package, additionally:
  • 206+ state flags (respect regulations, if not government use!)
  • figures (disc, rounded rectangle, squared rectangle)
  • styles (border, shadow, stretching to ratio 1:2)
more
  • like the more files download package, additionally:
  • 110+ flags (e.g. active autonomist and secessionist movements, civil ensigns, confederations, formerly independent states, organisations, unrecognized states, Commonwealth member countries, states of Germany)
full

Want to request an updated flag or you found a problem with Vector Flag Icons? Feel free to submit an issue on the GitHub project or write us.