---
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.
description: Display country flags with the Tabler flags plugin. Add a flag with two CSS classes and scale it with ready-made size modifiers.
css-plugins: [flags]
source: core/scss/ui/_flags.scss
classnames:
  component:
    - class: flag
      desc: Container element, a rounded rectangle holding one flag
  color:
    - class: flag-country-{code}
      desc: The country to show, by ISO code — for example flag-country-pl or flag-country-us
  size:
    - class: flag-{size}
      desc: From flag-xxs to flag-2xl; the default matches an avatar
---

import Example from '@components/Example.astro'
import Flags from '@components/Flags.astro'
import CdnImportPlugin from '@components/CdnImportPlugin.astro'

## Installation

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

You can also include the plugin via CDN:

<CdnImportPlugin plugins={['flags']} />

## Flag

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

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

## 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, you should use the following class: `.flag-country-ad`. The full list of countries can be found at the end of this page.

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

## 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.

<Example centered>
<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>
</Example>

## Flags list

The full list of countries can be found below.

<Flags />

## 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.