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:
<i class="fl fl-ag"></i>
<i class="fl fl-ch"></i>
<i class="fl fl-eu"></i>
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.
<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>
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.
<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>
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.
<i class="fl fl-cy fl-border"></i>
fl-border-dark
<i class="fl fl-nu fl-border-dark"></i>
fl-border-light.
<i class="fl fl-eu fl-border-light"></i>
<i class="fl fl-jp fl-shadow"></i>
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>
<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>
<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>
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>
<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.
...
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.
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.