Flags

The flags plugin adds over 300 country, territory and organisation flags as CSS classes, for language switchers, address forms and phone number fields.

Installation

The flags are a plugin. Include tabler-flags.css or tabler-flags.min.css in your page to enable them.

You can also include the plugin via CDN:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/[email protected]/dist/css/tabler-flags.min.css" integrity="sha384-y8z9l8Ic1TU977jKJGs+dqGYKYNpiZSKwuym7KXxEFC/XvoRsUTjd592k41L/QJk" crossorigin="anonymous" />

Flag

Add the flag class to an element and a country class from the list below.

<span class="flag flag-country-us"></span>

Country flags

The country class is flag-country- followed by the two-letter ISO code, for example .flag-country-ad for Andorra. Flags of organisations and other flags without an ISO code use a slug instead, for example .flag-country-african-union. The full list is at the end of this page.

The flags come from Tabler Flags, which also ships them as SVG and PNG files and as React, Vue, Preact and Astro components. Every flag is drawn at a 5:4 ratio, so a row of flags lines up whatever the countries are.

<span class="flag flag-country-tg"></span>
<span class="flag flag-country-br"></span>
<span class="flag flag-country-pt"></span>

Flag sizes

Add a size class from flag-xxs to flag-2xl to scale the flag. The sizes are the same as the avatar sizes, so a flag and an avatar in one list line up.

<span class="flag flag-2xl flag-country-us"></span>
<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>
<span class="flag flag-xxs flag-country-us"></span>

Old flag codes

A few flags changed their code in Tabler 1.7, when the plugin moved to the Tabler Flags set. The old classes keep working as aliases, so nothing breaks, but they are deprecated and will be removed in 2.0. Switch to the new code when you touch the markup:

Flags list

All available flags, grouped by category:

Countries

Territories

Unions

Other

Accessibility

• A flag is a picture, not a language and not a country name. Always put the name in text next to it, or in an aria-label.
• Many languages are spoken in more than one country, and many countries in more than one language. A flag on a language switcher is ambiguous - use the language name, written in that language.
• The flag element is decoration, so keep it out of the reading order with aria-hidden="true" when the name is already there.
• Do not use a flag as the only mark of a selected option.

Class reference

Every class this component ships, grouped by what it changes. A name in braces stands for a family — {color} is any base color, {breakpoint} any responsive step.