tabler/docs/ui/plugins/flags.mdx

---
title: Flags
summary: Thanks to the Tabler flags plugin, you can create flags to visually represent countries or languages. Flags are often used in forms, as an element of a delivery address, phone number dialling code and many more.
plugin: flags
libs: tabler-flags
description: Visual representation of countries/languages.
---

## Installation

This part of Tabler is distributed as plugin. To enable it you should include `tabler-flags.css` or `tabler-flags.min.css` file to your page.

You can also include plugin via CDN:

```html
<link rel="stylesheet" href="$TABLER_CDN/dist/css/tabler-flags.min.css">
```

## Flag

To create a flag, add the `flag` class to a component and choose the country whose flag you want to use. 

```html example centered separated plugins="flags"
<span class="flag flag-country-us"></span>
```


## Country flags

To use the flag of a particular country, add the `flag-country-(country name)` class. For example, to create a flag of Andorra should use the following class: `.flag-country-ad`. Full list of countries can be found below.

```html
<span class="flag flag-country-ad"></span>
<span class="flag flag-country-ae"></span>
```

```html example centered separated plugins="flags"
<span class="flag flag-country-tg"></span>
<span class="flag flag-country-br"></span>
<span class="flag flag-country-pt"></span>
```

## Flag sizes

Using Bootstrap’s typical naming structure, you can create a standard flag, or scale it up or down to different sizes based on what’s needed.

```html example centered separated plugins="flags"
<span class="flag flag-xl flag-country-us"></span>
<span class="flag flag-lg flag-country-us"></span>
<span class="flag flag-md flag-country-us"></span>
<span class="flag flag-sm flag-country-us"></span>
<span class="flag flag-xs flag-country-us"></span>
```

```html
<span class="flag flag-xl ..."></span>
<span class="flag flag-lg ..."></span>
<span class="flag flag-md ..."></span>
<span class="flag flag-sm ..."></span>
<span class="flag flag-xs ..."></span>
```

## Flags list

The full list of countries can be found below.

<FlagsTable countries={[
  { "name": "Andorra", "code": "ad" },
  { "name": "United Arab Emirates", "code": "ae" },
  { "name": "Afghanistan", "code": "af" },
  { "name": "Antigua", "code": "ag" },
  { "name": "Anguilla", "code": "ai" },
  { "name": "Armenia", "code": "am" },
  { "name": "Angolan", "code": "ao" },
  { "name": "Antarctica", "code": "aq" },
  { "name": "Argentina", "code": "ar" },
  { "name": "American Samoa", "code": "as" },
  { "name": "Austria", "code": "at" },
  { "name": "Australia", "code": "au" },
  { "name": "Aruba", "code": "aw" },
  { "name": "Aslan Islands", "code": "ax" },
  { "name": "Azerbaijan", "code": "az" },
  { "name": "Bosnian", "code": "ba" },
  { "name": "Barbados", "code": "bb" },
  { "name": "Belgium", "code": "be" },
  { "name": "Burkina Faso", "code": "bf" },
  { "name": "Bulgaria", "code": "bg" },
  { "name": "Bahrain", "code": "bh" },
  { "name": "Burundi", "code": "bi" },
  { "name": "Benin", "code": "bj" },
  { "name": "Saint-Barthélemy", "code": "bl" },
  { "name": "Bermuda", "code": "bm" },
  { "name": "Bruneian", "code": "bn" },
  { "name": "Bolivia", "code": "bo" },
  { "name": "Bonaire", "code": "bq-bo" },
  { "name": "Brazil", "code": "br" },
  { "name": "Bahamas", "code": "bs" },
  { "name": "Bhutan", "code": "bt" },
  { "name": "Bouvet Island", "code": "bv" },
  { "name": "Batswana", "code": "bw" },
  { "name": "Belarus", "code": "by" },
  { "name": "Belize", "code": "bz" },
  { "name": "Canada", "code": "ca" },
  { "name": "Cocos Island", "code": "cc" },
  { "name": "Democratic Republic of Congo", "code": "cd" },
  { "name": "Central African Republic", "code": "cf" },
  { "name": "Republic of the Congo", "code": "cg" },
  { "name": "Switzerland", "code": "ch" },
  { "name": "Ivory Coast", "code": "ci" },
  { "name": "Cook Island", "code": "ck" },
  { "name": "Chile", "code": "cl" },
  { "name": "Cameroon", "code": "cm" },
  { "name": "China", "code": "cn" },
  { "name": "Colombia", "code": "co" },
  { "name": "Costa Rica", "code": "cr" },
  { "name": "Cuba", "code": "cu" },
  { "name": "Cape Verde", "code": "cv" },
  { "name": "Curacao", "code": "cw" },
  { "name": "Christmas Island", "code": "cx" },
  { "name": "Cyprus", "code": "cy" },
  { "name": "Czech Republic", "code": "cz" },
  { "name": "Germany", "code": "de" },
  { "name": "Djibouti", "code": "dj" },
  { "name": "Denmark", "code": "dk" },
  { "name": "Dominica", "code": "dm" },
  { "name": "Dominican Republic", "code": "do" },
  { "name": "Algeria", "code": "dz" },
  { "name": "Ecuador", "code": "ec" },
  { "name": "Estonia", "code": "ee" },
  { "name": "Egypt", "code": "eg" },
  { "name": "Sahrawi", "code": "eh" },
  { "name": "Eritrea", "code": "er" },
  { "name": "Spain", "code": "es" },
  { "name": "Ethiopia", "code": "et" },
  { "name": "European Union", "code": "eu" },
  { "name": "Finland", "code": "fi" },
  { "name": "Fiji", "code": "fj" },
  { "name": "Falkland Islands", "code": "fk" },
  { "name": "Federate States of Micronesia", "code": "fm" },
  { "name": "Faroe Islands", "code": "fo" },
  { "name": "France", "code": "fr" },
  { "name": "Gabon", "code": "ga" },
  { "name": "Great Britain", "code": "gb" },
  { "name": "England", "code": "gb-eng" },
  { "name": "Northern Ireland", "code": "gb-nir" },
  { "name": "Scotland", "code": "gb-sct" },
  { "name": "Wales", "code": "gb-wls" },
  { "name": "Grenada", "code": "gd" },
  { "name": "Georgia", "code": "ge" },
  { "name": "Guyana", "code": "gf" },
  { "name": "Guernsey", "code": "gg" },
  { "name": "Ghana", "code": "gh" },
  { "name": "Gibraltar", "code": "gi" },
  { "name": "Greenland", "code": "gl" },
  { "name": "Gambia", "code": "gm" },
  { "name": "Guinea", "code": "gn" },
  { "name": "Guadeloupe", "code": "gp" },
  { "name": "Equatorial Guinea", "code": "gq" },
  { "name": "Greece", "code": "gr" },
  { "name": "South Georgia", "code": "gs" },
  { "name": "Guatemala", "code": "gt" },
  { "name": "Guam", "code": "gu" },
  { "name": "Guinea-Bissau", "code": "gw" },
  { "name": "Guyana", "code": "gy" },
  { "name": "Hong Kong", "code": "hk" },
  { "name": "Heard and McDonald Islands", "code": "hm" },
  { "name": "Honduras", "code": "hn" },
  { "name": "Croatia", "code": "hr" },
  { "name": "Haiti", "code": "ht" },
  { "name": "Hungary", "code": "hu" },
  { "name": "Indonesia", "code": "id" },
  { "name": "Ireland", "code": "ie" },
  { "name": "Israel", "code": "il" },
  { "name": "Isle of Man", "code": "im" },
  { "name": "India", "code": "in" },
  { "name": "British Indian Ocean Territory", "code": "io" },
  { "name": "Iraq", "code": "iq" },
  { "name": "Iran", "code": "ir" },
  { "name": "Iceland", "code": "is" },
  { "name": "Italy", "code": "it" },
  { "name": "Jersey", "code": "je" },
  { "name": "Jamaica", "code": "jm" },
  { "name": "Jordan", "code": "jo" },
  { "name": "Japan", "code": "jp" },
  { "name": "Kenya", "code": "ke" },
  { "name": "Kyrgyzstan", "code": "kg" },
  { "name": "Cambodia", "code": "kh" },
  { "name": "Kiribati", "code": "ki" },
  { "name": "Comoros", "code": "km" },
  { "name": "Saint Kitts and Nevis", "code": "kn" },
  { "name": "North Korea", "code": "kp" },
  { "name": "South Korea", "code": "kr" },
  { "name": "Kuwait", "code": "kw" },
  { "name": "Cayman Islands", "code": "ky" },
  { "name": "Kazakhstan", "code": "kz" },
  { "name": "Laos", "code": "la" },
  { "name": "Lebanese", "code": "lb" },
  { "name": "Saint Lucia", "code": "lc" },
  { "name": "Liechtenstein", "code": "li" },
  { "name": "Sri Lanka", "code": "lk" },
  { "name": "Liberia", "code": "lr" },
  { "name": "Lesotho", "code": "ls" },
  { "name": "Lithuania", "code": "lt" },
  { "name": "Luxembourg", "code": "lu" },
  { "name": "Latvia", "code": "lv" },
  { "name": "Libya", "code": "ly" },
  { "name": "Morocco", "code": "ma" },
  { "name": "Monaco", "code": "mc" },
  { "name": "Moldova", "code": "md" },
  { "name": "Montenegro", "code": "me" },
  { "name": "Saint Martin", "code": "mf" },
  { "name": "Madagascar", "code": "mg" },
  { "name": "Marshall Islands", "code": "mh" },
  { "name": "Macedonia", "code": "mk" },
  { "name": "Mali", "code": "ml" },
  { "name": "Myanmar", "code": "mm" },
  { "name": "Mongolia", "code": "mn" },
  { "name": "Macao", "code": "mo" },
  { "name": "Northern Mariana Islands", "code": "mp" },
  { "name": "Martinique", "code": "mq" },
  { "name": "Mauritania", "code": "mr" },
  { "name": "Montserrat", "code": "ms" },
  { "name": "Malta", "code": "mt" },
  { "name": "Mauritius", "code": "mu" },
  { "name": "Maldives", "code": "mv" },
  { "name": "Malawi", "code": "mw" },
  { "name": "Mexico", "code": "mx" },
  { "name": "Malaysia", "code": "my" },
  { "name": "Mozambique", "code": "mz" },
  { "name": "Namibia", "code": "na" },
  { "name": "New Caledonia", "code": "nc" },
  { "name": "Niger", "code": "ne" },
  { "name": "Norfolk Island", "code": "nf" },
  { "name": "Nigeria", "code": "ng" },
  { "name": "Nicaragua", "code": "ni" },
  { "name": "Norway", "code": "no" },
  { "name": "Nepal", "code": "np" },
  { "name": "Nauruan", "code": "nr" },
  { "name": "New Zealand", "code": "nz" },
  { "name": "Oman", "code": "om" },
  { "name": "Panama", "code": "pa" },
  { "name": "Peru", "code": "pe" },
  { "name": "French Polynesia", "code": "pf" },
  { "name": "Papua New Guinea", "code": "pg" },
  { "name": "Philippines", "code": "ph" },
  { "name": "Pakistan", "code": "pk" },
  { "name": "Poland", "code": "pl" },
  { "name": "Saint Pierre", "code": "pm" },
  { "name": "Pitcairn Islands", "code": "pn" },
  { "name": "Puerto Rico", "code": "pr" },
  { "name": "Palestine", "code": "ps" },
  { "name": "Portugal", "code": "pt" },
  { "name": "Palau", "code": "pw" },
  { "name": "Paraguay", "code": "py" },
  { "name": "Qatar", "code": "qa" },
  { "name": "Reunion Island", "code": "re" },
  { "name": "Romania", "code": "ro" },
  { "name": "Serbia", "code": "rs" },
  { "name": "Russia", "code": "ru" },
  { "name": "Rwanda", "code": "rw" },
  { "name": "Saudi Arabia", "code": "sa" },
  { "name": "Solomon Islands", "code": "sb" },
  { "name": "Seychelles", "code": "sc" },
  { "name": "Sudan", "code": "sd" },
  { "name": "Sweden", "code": "se" },
  { "name": "Singapore", "code": "sg" },
  { "name": "Saint Helena", "code": "sh" },
  { "name": "Slovenia", "code": "si" },
  { "name": "Svalbard Island", "code": "sj" },
  { "name": "Slovakia", "code": "sk" },
  { "name": "Sierra Leone", "code": "sl" },
  { "name": "San Marino", "code": "sm" },
  { "name": "Senegal", "code": "sn" },
  { "name": "Somalia", "code": "so" },
  { "name": "Suriname", "code": "sr" },
  { "name": "South Sudan", "code": "ss" },
  { "name": "Sao Tome", "code": "st" },
  { "name": "El Salvador", "code": "sv" },
  { "name": "Sint Maarten", "code": "sx" },
  { "name": "Syria", "code": "sy" },
  { "name": "Swaziland", "code": "sz" },
  { "name": "Turks and Caicos", "code": "tc" },
  { "name": "Chad", "code": "td" },
  { "name": "French Southern and Antarctic Lands", "code": "tf" },
  { "name": "Togo", "code": "tg" },
  { "name": "Thailand", "code": "th" },
  { "name": "Tajikistan", "code": "tj" },
  { "name": "Tokelau", "code": "tk" },
  { "name": "Timor Leste", "code": "tl" },
  { "name": "Turkmenistan", "code": "tm" },
  { "name": "Tunisia", "code": "tn" },
  { "name": "Tonga", "code": "to" },
  { "name": "Turkey", "code": "tr" },
  { "name": "Trinidad and Tobago", "code": "tt" },
  { "name": "Tuvalu", "code": "tv" },
  { "name": "Tanzania", "code": "tz" },
  { "name": "Ukraine", "code": "ua" },
  { "name": "Uganda", "code": "ug" },
  { "name": "United States Minor Islands", "code": "um" },
  { "name": "United States of America", "code": "us" },
  { "name": "Uruguay", "code": "uy" },
  { "name": "Uzbekistan", "code": "uz" },
  { "name": "Vatican City", "code": "va" },
  { "name": "Saint Vincent", "code": "vc" },
  { "name": "Venezuela", "code": "ve" },
  { "name": "British Virgin Islands", "code": "vg" },
  { "name": "Virgin Islands", "code": "vi" },
  { "name": "Vietnam", "code": "vn" },
  { "name": "Vanuatu", "code": "vu" },
  { "name": "Wallis and Futuna", "code": "wf" },
  { "name": "Samoa", "code": "ws" },
  { "name": "Yemen", "code": "ye" },
  { "name": "South Africa", "code": "za" },
  { "name": "Zambia", "code": "zm" },
  { "name": "Zimbabwe", "code": "zw" }
]}/>