Flag Icons

https://github.com/lipis/flag-icons
Admin
A curated collection of all country flags in SVG with CSS for easy integration and display.
Tokens:24,404
Snippets:160
Trust Score:9.9
License:MIT
Update:1 month ago
Show doc for...
Tokens:
Raw
### Serve flag-icons locally

Source: https://github.com/lipis/flag-icons/blob/main/README.md

Start a local development server on localhost:8000.

```bash
$ yarn start
```

--------------------------------

### Switch installation command

Source: https://github.com/lipis/flag-icons/blob/main/index.html

Updates the displayed installation command and the copy button's data attribute based on the selected tab (e.g., npm or yarn). Also toggles the active class on the tab buttons.

```JavaScript
const switchInstallCommand = (type) => { installCommand.textContent = installCommands[type]; copyBtn.dataset.copy = installCommands[type]; installTabs.forEach((tab) => { if (tab.dataset.tab === type) { tab.classList.add("active"); } else { tab.classList.remove("active"); } }); };
```

--------------------------------

### Start the application when the DOM is ready

Source: https://github.com/lipis/flag-icons/blob/main/index.html

Adds a DOMContentLoaded event listener that calls the init function to start the application.

```JavaScript
document.addEventListener("DOMContentLoaded", init);
```

--------------------------------

### Install flag-icons via npm or Yarn

Source: https://github.com/lipis/flag-icons/blob/main/README.md

Install the flag-icons package using npm or Yarn. Run either command in your project directory.

```bash
npm install flag-icons
# or
yarn add flag-icons
```

--------------------------------

### HTML usage examples for flag classes

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/css-classes.md

Shows realistic HTML usage combining the base `.fi` class with the generated `.fi-<code>` classes. Includes examples for ISO country flags (4:3 and square), a non-ISO entity flag, and the fallback `xx` code. Unknown codes simply render no background.

```html
<!-- ISO country, 4:3 -->
<span class="fi fi-de"></span>
<!-- ISO country, square -->
<span class="fi fi-de fis"></span>
<!-- non-ISO entity flag -->
<span class="fi fi-eu"></span>
<!-- fallback when a code is unknown -->
<span class="fi fi-xx"></span>
```

--------------------------------

### Initialize the application

Source: https://github.com/lipis/flag-icons/blob/main/index.html

Loads country data from 'country.json', sorts countries by name, creates flag cards, and sets up all event listeners for search, format switching, installation tabs, copy buttons, usage modal, and filter dropdown. Handles initialization errors.

```JavaScript
const init = async () => { try { const countries = await loadJSON("country.json"); // Sort countries by name countries.sort((a, b) => a.name.localeCompare(b.name)); // Create flag cards countries.forEach((country) => { const card = createFlagCard(country); if (country.iso) { isoFlagsGrid.appendChild(card); } else { nonIsoFlagsGrid.appendChild(card); } allFlags.push({ country, element: card, }); }); setupCopyButtons(); // Set up event listeners searchInput.addEventListener("input", filterFlags); format4x3Btn.addEventListener("click", () => switchFormat("4x3")); format1x1Btn.addEventListener("click", () => switchFormat("1x1")); // Installation tab switching installTabs.forEach((tab) => { tab.addEventListener("click", () => { switchInstallCommand(tab.dataset.tab); }); }); // Copy npm/yarn command copyBtn.addEventListener("click", (e) => { const textToCopy = e.currentTarget.dataset.copy; navigator.clipboard .writeText(textToCopy) .then(() => showCopyTooltip()) .catch((err) => console.error("Could not copy text: ", err)); }); // Usage modal usageBtn.addEventListener("click", () => { usageModal.classList.add("active"); }); modalClose.addEventListener("click", () => { usageModal.classList.remove("active"); }); usageModal.addEventListener("click", (e) => { if (e.target === usageModal) { usageModal.classList.remove("active"); } }); // Filter dropdown filterBtn.addEventListener("click", toggleFilterDropdown); filterOptions.forEach((option) => { option.addEventListener("click", () => { currentFilter = option.dataset.filter; filterBtn.textContent = option.textContent + " "; const icon = document.createElement("i"); icon.className = "bi bi-chevron-down"; filterBtn.appendChild(icon); filterOptions.forEach((opt) => { opt.classList.toggle("active", opt === option); }); filterFlags(); toggleFilterDropdown(); }); }); // Code block copy buttons codeBlockCopyBtns.forEach((btn) => { btn.addEventListener("click", () => copyCode(btn)); }); } catch (error) { console.error("Error initializing the application:", error); } };
```

--------------------------------

### maven.sh: Publish flag-icons to WebJars

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/scripts-tools.md

Executable script in repo root that gets the latest git tag, strips the leading 'v', and triggers a WebJars deploy via a curl query to https://www.webjars.org/deploy. Invoked via `yarn maven`. Outputs the publish of flag-icons to WebJars (org.webjars.npm/flag-icons on Maven Central).

```bash
version=$(git describe --tags --abbrev=0)
url="https://www.webjars.org/deploy?webJarType=npm&nameOrUrlish=flag-icons&version=${version#v}"
curl "$url"
```

--------------------------------

### HTML usage of .fib with explicit sizing

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/css-classes.md

Example of applying the .fib class to a div element, requiring the consumer to provide explicit width and height.

```html
<!-- The element must be sized by the consumer; .fib only sets the image box -->
<div class="fib" style="width: 80px; height: 60px;"> … </div>
```

--------------------------------

### Use flag-icons via CDN

Source: https://github.com/lipis/flag-icons/blob/main/README.md

Include the flag-icons CSS from a CDN in your HTML to use the flags without installing the package.

```html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.3.2/css/flag-icons.min.css"
/>
```

--------------------------------

### Override flag-icons Sass variables with @use

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/configuration.md

Use this @use rule to override the default Sass variables when importing flag-icons. The example sets the flag path and restricts generated country classes to Greece, Germany, and Great Britain. Only variables marked with !default can be overridden.

```scss
@use "node_modules/flag-icons/sass/flag-icons" with (
  $flag-icons-path: "node_modules/flag-icons/flags",
  $flag-icons-included-countries: ("gr", "de", "gb")
);
```

--------------------------------

### Build flag-icons SCSS files

Source: https://github.com/lipis/flag-icons/blob/main/README.md

Build the SCSS files to generate the CSS.

```bash
$ yarn build
```

--------------------------------

### Sass entry point module (sass/flag-icons.scss)

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/sass-entry-point.md

The complete Sass entry point module. It forwards the variables module and uses the base and list modules to generate CSS rules. Consumers can load it with `@use "node_modules/flag-icons/sass/flag-icons" as flag-icons;` and override `!default` variables via the `with` clause.

```scss
@forward "variables";
@use "flag-icons-base";
@use "flag-icons-list";
```

--------------------------------

### 运行 flags.py 同步验证脚本

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/scripts-tools.md

该命令用于执行 flags.py 脚本，该脚本会重写 country.json 文件，并在文件列表不匹配时以非零退出码退出。第二条命令展示了如何链式检查同步状态，当且仅当脚本成功退出时才会打印 "in sync"。

```bash
python3 flags.py          # dry-run + rewrite; non-zero exit on mismatch
python3 flags.py && echo "in sync"
```

--------------------------------

### Load country.json and print asset paths (Python)

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/country-json.md

Loads country.json with the standard json module, builds a dictionary mapping each code to its flag asset paths, and prints the tuple for 'gr'. The comment notes that keys are already sorted and the list is sorted by name.

```python
import json

countries = json.load(open("country.json"))  # keys already sorted; list sorted by name
assets = {c["code"]: (c["flag_4x3"], c["flag_1x1"]) for c in countries}
print(assets["gr"])  # ('flags/4x3/gr.svg', 'flags/1x1/gr.svg')
```

--------------------------------

### Usage: non-trivial call with custom configuration

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/sass-mixin.md

Shows how to configure the mixin with custom path and square variant disabled, and the resulting behavior.

```scss
@use "node_modules/flag-icons/sass/flag-icons" with (
  $flag-icons-path: "/static/vendor/flag-icons",
  $flag-icons-use-square: false
);

@include flag-icons-base.flag-icon("gb-eng"); // no .fis selector is emitted
```

--------------------------------

### Fetch country.json and build continent map (JavaScript)

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/country-json.md

Fetches the shipped country.json from CDN, groups ISO countries by continent, and logs the first three European entries. Also defines a flagMarkup helper that falls back to code 'xx' when a code is not found, returning a span with the 'fi fi-{code}' class and the country name.

```javascript
// fetch the shipped data (CDN or local copy) and build a code → asset map
const res = await fetch("https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.5.0/country.json");
const countries = await res.json(); // 271 records, sorted by "name" (see flags.py sort)

// all ISO countries, plus the fallback code first
const byContinent = {};
for (const c of countries) {
  if (c.iso && c.continent) (byContinent[c.continent] ??= []).push(c);
}
console.log(byContinent["Europe"].slice(0, 3));
// => [{capital: "Mariehamn", code: "ax", …}, …]

// keys are directly usable as CSS classes / asset paths
function flagMarkup(code) {
  const c = countries.find((x) => x.code === code) ?? countries.find((x) => x.code === "xx");
  return `<span class="fi fi-${c.code}"></span> ${c.name}`;
}
```

--------------------------------

### Import flag-icons CSS via HTML CDN

Source: https://github.com/lipis/flag-icons/blob/main/index.html

Include this link tag in your HTML head to load the flag-icons stylesheet from the CDN.

```html
<link rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/lipis/flag-icons@7.3.2/css/flag-icons.min.css" />
```

--------------------------------

### Configure flag-icons with custom path and included countries

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/sass-entry-point.md

Loads flag-icons with a custom path to the flags directory and restricts the included country flags to a subset. The configuration uses the `$flag-icons-path` and `$flag-icons-included-countries` variables.

```scss
@use "node_modules/flag-icons/sass/flag-icons" with (
  // Override path to flags directory
  $flag-icons-path: "node_modules/flag-icons/flags",

  // Include only specific country flags
  $flag-icons-included-countries: ("gr", "de", "gb")
);
```

--------------------------------

### Basic Sass load of flag-icons

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/sass-entry-point.md

Loads the flag-icons Sass entry point, compiling all base classes and 271 country classes.

```scss
@use "node_modules/flag-icons/sass/flag-icons";
```

--------------------------------

### Flag-icons utility script

Source: https://github.com/lipis/flag-icons/blob/main/index.html

A collection of utility functions and state management for handling flag rendering, filtering, and copying functionality.

```javascript
// Utility functions const loadJSON = (path) => { return fetch(path) .then((response) => response.json()) .catch((error) => console.error("Error loading JSON:", error)); }; // DOM elements const isoFlagsGrid = document.getElementById("iso-flags"); const nonIsoFlagsGrid = document.getElementById("non-iso-flags"); const searchInput = document.getElementById("search-flag"); const format4x3Btn = document.getElementById("format-4x3"); const format1x1Btn = document.getElementById("format-1x1"); const copyTooltip = document.getElementById("copy-tooltip"); const installTabs = document.querySelectorAll(".install-tab"); const installCommand = document.getElementById("install-command"); const copyBtn = document.querySelector(".copy-btn"); const usageBtn = document.querySelector(".usage-btn"); const usageModal = document.getElementById("usage-modal"); const modalClose = document.querySelector(".modal-close"); const filterBtn = document.querySelector(".filter-btn"); const filterDropdown = document.querySelector(".filter-dropdown"); const filterOptions = document.querySelectorAll(".filter-option"); const codeBlockCopyBtns = document.querySelectorAll(".code-copy-btn"); // State let currentFormat = "4x3"; let allFlags = []; let tooltipTimeout; let currentFilter = "all"; let installCommands = { npm: "npm install flag-icons", yarn: "yarn add flag-icons", }; // Create flag card element const createFlagCard = (country) => { const card = document.createElement("div"); card.classList.add("flag-card"); card.dataset.code = country.code; card.dataset.continent = country.continent || "non-iso"; const imgContainer = document.createElement("div"); imgContainer.classList.add("flag-img-container"); const imgSquareContainer = document.createElement("div"); imgSquareContainer.classList.add( "flag-img-container", "flag-img-square", ); imgSquareContainer.style.display = "none"; const img4x3 = document.createElement("img"); img4x3.src = country.flag_4x3; img4x3.alt = `Flag of ${country.name}`; img4x3.loading = "lazy"; // Lazy loading for performance const img1x1 = document.createElement("img"); img1x1.src = country.flag_1x1; img1x1.alt = `Flag of ${country.name}`; img1x1.loading = "lazy"; const info = document.createElement("div"); info.classList.add("flag-info"); const code = document.createElement("div"); code.classList.add("flag-code"); code.textContent = country.code; const name = document.createElement("div"); name.classList.add("flag-name"); name.textContent = country.name; name.title = country.name; imgContainer.appendChild(img4x3); imgSquareContainer.appendChild(img1x1); info.appendChild(code); info.appendChild(name); card.appendChild(imgContainer); card.appendChild(imgSquareContainer); card.appendChild(info); // Add click event to copy the flag code card.addEventListener("click", () => { const format = currentFormat === "4x3" ? "" : " fis"; const htmlCode = `<span class="fi fi-${country.code}${format}"></span>`; navigator.clipboard .writeText(htmlCode) .then(() => showCopyTooltip()) .catch((err) => console.error("Could not copy text: ", err)); }); return card; }; // Show tooltip when copying const showCopyTooltip = () => { clearTimeout(tooltipTimeout); copyTooltip.style.opacity = "1"; tooltipTimeout = setTimeout(() => { copyTooltip.style.opacity = "0"; }, 2000); }; const setupCopyButtons = () => { document.getElementById("copy-standard-code").dataset.code = `<span class="fi fi-us"></span> United States`; document.getElementById("copy-square-code").dataset.code = `<span class="fi fi-us fis"></span> United States`; }; // Filter flags based on search input and continent const filterFlags = () => { const searchTerm = searchInput.value.toLowerCase(); allFlags.forEach((flag) => { const isSearchMatch =
```

--------------------------------

### flag-icons repository module graph

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/README.md

Shows the repository layout of flag-icons, including the precompiled CSS output, Sass source files, SVG flag directories, and supporting scripts. Use it to understand where each build artifact and source file lives.

```text
package root
├── css/                        # precompiled output (what the npm main field points to)
│   ├── flag-icons.css          #   readable build (1915 lines), produced by `yarn build:dev`
│   └── flag-icons.min.css      #   minified build, produced by `yarn build:min`
├── sass/                       # source-of-truth stylesheets
│   ├── flag-icons.scss         #   entry point: @forward "variables"; @use base + list
│   ├── _variables.scss         #   5 configuration variables (!default)
│   ├── _flag-icons-base.scss   #   .fib / .fi / .fis + @mixin flag-icon($country)
│   └── _flag-icons-list.scss   #   @each over $flag-icons-included-countries
├── flags/
│   ├── 4x3/<code>.svg          #   271 rectangle flags, viewBox "0 0 640 480"
│   └── 1x1/<code>.svg          #   271 square flags, viewBox "0 0 512 512"
├── country.json                #   271 records: code, name, iso, paths, capital, continent
├── flags.py                    #   CI validation: sync check between country.json and flags/
├── flag-ids.py                 #   maintenance: injects id="flag-icons-<code>" into SVGs
├── svgo.config.js              #   SVG optimization configuration
├── maven.sh                    #   WebJars publishing helper
├── index.html                  #   demo page (served by `yarn start`), not shipped in npm
└── package.json                #   build/test scripts, npm metadata
```

--------------------------------

### Switch between 4:3 and 1:1 formats

Source: https://github.com/lipis/flag-icons/blob/main/index.html

Toggles the active state of format buttons and shows/hides flag containers based on the selected format. Also sends a Google Analytics event for tracking the switch.

```JavaScript
const switchFormat = (format) => { currentFormat = format; if (format === "4x3") { format4x3Btn.classList.add("active"); format1x1Btn.classList.remove("active"); document .querySelectorAll(".flag-img-container:not(.flag-img-square)") .forEach((el) => { el.style.display = "block"; }); document.querySelectorAll(".flag-img-square").forEach((el) => { el.style.display = "none"; }); // Google Analytics tracking if (typeof gtag !== "undefined") { gtag("event", "switch", { event_category: "flags", event_label: "4x3", }); } } else { format1x1Btn.classList.add("active"); format4x3Btn.classList.remove("active"); document .querySelectorAll(".flag-img-container:not(.flag-img-square)") .forEach((el) => { el.style.display = "none"; }); document.querySelectorAll(".flag-img-square").forEach((el) => { el.style.display = "block"; }); // Google Analytics tracking if (typeof gtag !== "undefined") { gtag("event", "switch", { event_category: "flags", event_label: "1x1", }); } } };
```

--------------------------------

### Usage: direct invocation with custom code

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/sass-mixin.md

Shows how to use the mixin to emit a custom flag class for a non-standard code, including @use statements and @extend usage.

```scss
@use "node_modules/flag-icons/sass/flag-icons";
@use "sass/flag-icons-base"; // project-local re-use of the same module

// emit a custom flag class for a non-standard code
@include flag-icons-base.flag-icon("my-org");

.my-org-badge {
  @extend .fi;
  @extend .fis;
}
```

--------------------------------

### Use flag-icons with SASS

Source: https://github.com/lipis/flag-icons/blob/main/README.md

Import the SASS file and optionally override configuration variables like path and included countries.

```scss
@use "node_modules/flag-icons/sass/flag-icons";

// or with custom configuration
@use "node_modules/flag-icons/sass/flag-icons" with (
  // Override path to flags directory
  $flag-icons-path: "node_modules/flag-icons/flags",

  // Include only specific country flags
  $flag-icons-included-countries: ("gr", "de", "gb")
);
```

--------------------------------

### Use flag icons in HTML

Source: https://github.com/lipis/flag-icons/blob/main/README.md

Add flag icons inline with text using the .fi and .fi-xx classes. Add .fis for squared version.

```html
<span class="fi fi-gr"></span> <span class="fi fi-gr fis"></span>
```

--------------------------------

### svgo.config.js - SVGO optimization configuration

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/scripts-tools.md

Full configuration for SVGO, specifying plugins to optimize flag SVGs. It includes preset-default, prefixIds (with a custom prefix function using the file basename), convertStyleToAttrs, removeDimensions, removeScriptElement, removeStyleElement, and sortAttrs. This config is used to process the flag SVGs, ensuring they have no dimensions, no scripts/styles, and deterministic attribute order.

```javascript
module.exports = {
  plugins: [
    { name: "preset-default" },
    {
      name: "prefixIds",
      params: {
        delim: "-",
        prefix: (_, info) => {
          if (info.path != null && info.path.length > 0) {
            return getBasename(info.path).split(".")[0];
          }
          return "prefix";
        },
      },
    },
    "convertStyleToAttrs",
    "removeDimensions",
    "removeScriptElement",
    "removeStyleElement",
    "sortAttrs",
  ],
};
```

--------------------------------

### Internal module graph of flag-icons Sass entry

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/sass-entry-point.md

Shows the dependency structure of the Sass entry point: the entry file forwards variables, uses base and list modules.

```text
flag-icons.scss (entry)
├── @forward → _variables.scss          (5 config variables, all !default)
├── @use     → _flag-icons-base.scss    (.fib/.fi/.fis rules + @mixin flag-icon)
└── @use     → _flag-icons-list.scss    (@each over $flag-icons-included-countries → flag-icon())
```

--------------------------------

### Emitted CSS for $country: gr

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/sass-mixin.md

Shows the CSS output for the default configuration with $country: gr, including both the rectangular and square (fis) selectors.

```css
.fi-gr {
  background-image: url(../flags/4x3/gr.svg);
}
.fi-gr.fis {
  background-image: url(../flags/1x1/gr.svg);
}
```

--------------------------------

### .fib

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/css-classes.md

The `.fib` class is the base for flag-icon backgrounds. It sets the background-image box behavior without imposing any size, leaving the consumer to define the element's dimensions.

```APIDOC
## .fib — flag-icon background base

### Description
Sets the background-image box behavior for any element carrying the `fib` or `fi` class. It does not impose any size; the consumer must set an explicit element size with a 4:3 ratio (or 1:1 for square).

### Usage
Apply the class to an HTML element and control its dimensions via CSS or inline styles.

### CSS Properties
- `background-size: contain` — the flag image is scaled to fit entirely inside the element
- `background-position: 50%` — the image is centered
- `background-repeat: no-repeat` — the image is not tiled

### Example
```html
<div class="fib" style="width: 80px; height: 60px;"> … </div>
```
```

--------------------------------

### Full content of _flag-icons-list.scss

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/sass-entry-point.md

The list module iterates over the configured countries and includes the flag-icon mixin for each. It is the only place that uses `$flag-icons-included-countries`.

```scss
@use "variables";
@use "flag-icons-base";

@each $country in variables.$flag-icons-included-countries {
  @include flag-icons-base.flag-icon($country);
}
```

--------------------------------

### .fi

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/css-classes.md

The `.fi` class is the base class for all flag icons. It extends `.fib` and is used together with a per-flag code class to display a specific flag.

```APIDOC
## .fi — flag-icon base

### Description
Extends `.fib` and serves as the base class for all flag icons. It sets the same background properties as `.fib` and is typically combined with a per-flag code class (e.g., `.fi-de`) to display a specific flag.

### Usage
Apply the class to an HTML element along with a per-flag code class to display a flag. The element must be sized by the consumer.

### CSS Properties
- `background-size: contain` — the flag image is scaled to fit entirely inside the element
- `background-position: 50%` — the image is centered
- `background-repeat: no-repeat` — the image is not tiled

### Example
```html
<div class="fi fi-de" style="width: 80px; height: 60px;"></div>
```
```

--------------------------------

### Import flag-icons CSS in JavaScript

Source: https://github.com/lipis/flag-icons/blob/main/README.md

Import the minified CSS file in your JavaScript code to use the flag icons.

```js
import "/node_modules/flag-icons/css/flag-icons.min.css";
```

--------------------------------

### Usage: basic call

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/sass-mixin.md

A minimal invocation of the mixin with a standard country code.

```scss
@include flag-icons-base.flag-icon("de");
```

--------------------------------

### .fi-<code>

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/css-classes.md

Per-flag code classes (e.g., `.fi-de`) set the background image for a specific flag. They are used together with the `.fi` base class and do not set the element size.

```APIDOC
## .fi-<code> — per-flag code class

### Description
Generated per-flag classes that set the `background-image` for a specific flag. There are 271 such classes, each corresponding to a country or territory code (e.g., `.fi-de` for Germany). These classes only set the background image; they do not set the element size.

### Usage
Apply the class to an element that also has the `.fi` base class (or `.fib`). The element must be sized by the consumer.

### Example
```html
<div class="fi fi-de" style="width: 80px; height: 60px;"></div>
```
```

--------------------------------

### Display flag in standard 4:3 format

Source: https://github.com/lipis/flag-icons/blob/main/index.html

Add the .fi and .fi-xx classes to a span element to display a flag in the standard 4:3 aspect ratio.

```html
<span class="fi fi-us"></span> United States
```

--------------------------------

### Copy code from code blocks

Source: https://github.com/lipis/flag-icons/blob/main/index.html

Copies the code stored in the button's data-code attribute to the clipboard. Shows a temporary 'Copied!' feedback and logs errors to the console.

```JavaScript
const copyCode = (btn) => { const code = btn.dataset.code; navigator.clipboard .writeText(code) .then(() => { // Visual feedback const originalText = btn.innerHTML; btn.innerHTML = '<i class="bi bi-check-lg"></i> Copied!'; setTimeout(() => { btn.innerHTML = originalText; }, 2000); }) .catch((err) => console.error("Could not copy text: ", err)); };
```

--------------------------------

### Square SVG structure (flags/1x1/gr.svg)

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/flag-assets.md

Shows the root structure of a square flag SVG file. The viewBox is '0 0 512 512' and the root id is 'flag-icons-gr'. Path content is optimized with fill colors.

```xml
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-gr" viewBox="0 0 512 512">
  <path fill="#0d5eaf" fill-rule="evenodd" d="M0 0h512v57H0z"/>
  …
</svg>
```

--------------------------------

### HTML usage for .fi with Greece and United States flags

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/css-classes.md

Shows how to use the .fi class with flag codes fi-gr and fi-us to display inline flags at 4:3 ratio.

```html
<span class="fi fi-gr"></span> Greece
```

```html
<span class="fi fi-us"></span> United States
```

--------------------------------

### Direct CSS background-image reference

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/flag-assets.md

Shows how to use a flag SVG as a CSS background-image without any package code. The URL points to the 4x3 French flag in node_modules.

```css
.hero-flag {
  background-image: url("node_modules/flag-icons/flags/4x3/fr.svg");
}
```

--------------------------------

### flag-icon($country)

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/sass-mixin.md

Documentation for the Sass mixin `flag-icon($country)` that generates flag icon CSS classes.

```APIDOC
## [SASS] flag-icon($country)

### Description
Generates the CSS rules for a flag icon class. It emits a `.fi-<code>` selector with a background image pointing to the rectangular flag SVG, and optionally a `.fi-<code>.fis` selector for the square variant when the `$flag-icons-use-square` variable is truthy.

### Method
Sass mixin

### Endpoint
`flag-icon($country)`

### Parameters
#### Parameters
- **$country** (string) - Required - Lowercase ISO 3166-1 alpha-2 code or non-ISO entity code, e.g. `"gr"`, `"eu"`; interpolated verbatim into the selector name and the file URLs.

### Request Example
```scss
@include flag-icons-base.flag-icon("de");
```

### Response
#### Success Response
Emits CSS rules. For `$country: gr` with default configuration:

```css
.fi-gr {
  background-image: url(../flags/4x3/gr.svg);
}
.fi-gr.fis {
  background-image: url(../flags/1x1/gr.svg);
}
```

#### Response Example
```css
.fi-gr {
  background-image: url(../flags/4x3/gr.svg);
}
.fi-gr.fis {
  background-image: url(../flags/1x1/gr.svg);
}
```

### Error Handling
Sass raises a compile-time error only when the mixin call is malformed (e.g., zero or two arguments). Unknown-but-valid codes compile fine and produce selectors with no matching SVG file, rendering as empty backgrounds.
```

--------------------------------

### Rectangle SVG structure (flags/4x3/gr.svg)

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/flag-assets.md

Shows the root structure of a rectangle flag SVG file. The viewBox is '0 0 640 480' and the root id is 'flag-icons-gr'. Path content is optimized with fill colors.

```xml
<svg xmlns="http://www.w3.org/2000/svg" id="flag-icons-gr" viewBox="0 0 640 480">
  <path fill="#0d5eaf" fill-rule="evenodd" d="M0 0h640v53.3H0z"/>
  …
</svg>
```

--------------------------------

### CSS pattern for applying 4:3 ratio

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/css-classes.md

A typical CSS pattern for applying a 4:3 aspect ratio to a custom graphic element.

```css
/* Typical pattern: apply the 4:3 ratio through CSS */
.my-graphic {
  background-image: url("…/flags/4x3/de.svg"); /* or use a .fi-de class directly */
}
```

--------------------------------

### Display flag in square 1:1 format

Source: https://github.com/lipis/flag-icons/blob/main/index.html

Add the .fi, .fi-xx, and .fis classes to a span element to display a flag in the square 1:1 aspect ratio.

```html
<span class="fi fi-us fis"></span> United States
```

--------------------------------

### .fi CSS class definition

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/css-classes.md

Defines the inline flag with 4:3 aspect ratio. Uses position: relative, display: inline-block, width: 1.333333em, and line-height: 1em. The :before pseudo-element provides non-zero height via a non-breaking space.

```css
.fi {
  position: relative;
  display: inline-block;
  width: 1.333333em;
  line-height: 1em;
}
.fi:before {
  content: " ";
}
```

--------------------------------

### HTML usage for .fi.fis with Greece flag

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/css-classes.md

Shows how to use the .fi.fis class with the fi-gr flag code to display a square flag.

```html
<span class="fi fi-gr fis"></span> Greece, square
```

--------------------------------

### CSS .fib and .fi base class definition

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/css-classes.md

The compiled CSS definition for the .fib and .fi base classes, which configure background properties for flag elements.

```css
.fib, .fi {
  background-size: contain;
  background-position: 50%;
  background-repeat: no-repeat;
}
```

--------------------------------

### Mixin definition: flag-icon($country)

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/sass-mixin.md

The core mixin that emits .fi-<country> and optional .fis selectors. It uses variables from the variables namespace and conditionally includes the square variant based on $flag-icons-use-square.

```scss
@mixin flag-icon($country) {
  .fi-#{$country} {
    background-image: url(#{variables.$flag-icons-path}#{variables.$flag-icons-rect-path}/#{$country}.svg);

    @if variables.$flag-icons-use-square {
      &.fis {
        background-image: url(#{variables.$flag-icons-path}#{variables.$flag-icons-square-path}/#{$country}.svg);
      }
    }
  }
}
```

--------------------------------

### Sass variable declarations for flag-icons paths and square flag usage

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/sass-variables.md

Declares the four path and boolean variables with their default values. These are used to configure where flag SVGs are located and whether square flag selectors are generated.

```scss
// sass/_variables.scss:1-4
$flag-icons-path: "../flags" !default;
$flag-icons-rect-path: "/4x3" !default;
$flag-icons-square-path: "/1x1" !default;
$flag-icons-use-square: true !default;
```

--------------------------------

### Using flag SVG via SVG use element

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/flag-assets.md

Shows how to reference a flag SVG by its root id using an SVG use element. Requires inlining the SVG content. The id is 'flag-icons-us'.

```html
<svg><use href="#flag-icons-us"></use></svg>
```

--------------------------------

### .fi.fis CSS class definition

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/css-classes.md

Switches the inline flag from 4:3 to square (1:1) by setting width to 1em. Only emitted when the Sass variable $flag-icons-use-square is true (default).

```css
.fi.fis {
  width: 1em;
}
```

--------------------------------

### Generated CSS selectors for flag codes

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/css-classes.md

Shows the two CSS selectors generated for each country code: `.fi-xx` for the rectangle variant and `.fi-xx.fis` for the square variant. The `xx` is a placeholder for any ISO 3166-1 alpha-2 code or non-ISO entity code. The background image paths resolve relative to the `css/` directory.

```css
.fi-xx {
  background-image: url(../flags/4x3/xx.svg);
}
.fi-xx.fis {
  background-image: url(../flags/1x1/xx.svg);
}
```

--------------------------------

### Sass list of included country codes for flag-icons

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/sass-variables.md

Defines the `$flag-icons-included-countries` list, which controls which `.fi-<code>` classes are generated. The list is abridged here; the full list contains 271 quoted codes.

```scss
// sass/_variables.scss:5-277 (abridged — the list holds 271 quoted codes)
$flag-icons-included-countries: (
  // Keep xx first as it is often used as fallback
  "xx",

  "ad",
  "ae",
  // … ISO 3166-1 alpha-2 codes (lowercase) …
  "zw",

  // Other flags
  "arab",
  "asean",
  "cefta",
  "cp",
  "dg",
  "eac",
  "es-ct",
  "es-ga",
  "es-pv",
  "eu",
  "gb-eng",
  "gb-nir",
  "gb-sct",
  "gb-wls",
  "ic",
  "pc",
  "sh-ac",
  "sh-hl",
  "sh-ta",
  "un",
  "xk"
) !default;
```

--------------------------------

### Filter flags by search and filter

Source: https://github.com/lipis/flag-icons/blob/main/index.html

Filters flag cards based on a search term and a selected filter (all, non-iso, or continent). Updates the display style of each flag element accordingly.

```JavaScript
flag.country.name.toLowerCase().includes(searchTerm) || flag.country.code.toLowerCase().includes(searchTerm); const isFilterMatch = currentFilter === "all" || (currentFilter === "non-iso" && !flag.country.iso) || flag.country.continent === currentFilter; flag.element.style.display = isSearchMatch && isFilterMatch ? "" : "none"; }); };
```

--------------------------------

### Using flag SVG in img tag

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/flag-assets.md

Shows how to reference a flag SVG directly in an HTML img tag. The src points to the 4x3 US flag. The alt text is 'United States'.

```html
<img src="/path-to/flag-icons/flags/4x3/us.svg" alt="United States" />
```

--------------------------------

### CSS properties for flag backgrounds

Source: https://github.com/lipis/flag-icons/blob/main/README.md

CSS properties applied when using the fib class on any element to show a flag as a background.

```css
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
```

--------------------------------

### Minimal JSON record (Shape B)

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/types.md

Shape B of the Country/EntityFlag JSON record, present in 17 of 271 records. Omits capital and continent fields. The code field is the lowercase flag code, also used as SVG stem, JSON key, and CSS class suffix.

```json
{
  "code": "aq",
  "flag_1x1": "flags/1x1/aq.svg",
  "flag_4x3": "flags/4x3/aq.svg",
  "iso": true,
  "name": "Antarctica"
}
```

--------------------------------

### Country JSON record (Shape A)

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/types.md

Shape A of the Country/EntityFlag JSON record, present in 254 of 271 records. Includes capital and continent fields. The code field is the lowercase flag code, also used as SVG stem, JSON key, and CSS class suffix.

```json
{
  "capital": "Kabul",
  "code": "af",
  "continent": "Asia",
  "flag_1x1": "flags/1x1/af.svg",
  "flag_4x3": "flags/4x3/af.svg",
  "iso": true,
  "name": "Afghanistan"
}
```

--------------------------------

### .fi-<code>.fis

Source: https://github.com/lipis/flag-icons/blob/main/_autodocs/api-reference/css-classes.md

Square variant of the per-flag code class. When combined with `.fis`, the flag is displayed in a square aspect ratio (1:1).

```APIDOC
## .fi-<code>.fis — square flag variant

### Description
Square variant of the per-flag code class. When combined with `.fis`, the flag is displayed in a square aspect ratio (1:1). The element must be sized accordingly by the consumer.

### Usage
Apply the class to an element that also has the `.fi` base class and the `.fis` modifier. The element must be sized by the consumer.

### Example
```html
<div class="fi fi-de fis" style="width: 60px; height: 60px;"></div>
```
```

--------------------------------

### Toggle filter dropdown

Source: https://github.com/lipis/flag-icons/blob/main/index.html

Toggles the 'active' class on the filter dropdown element to show or hide it.

```JavaScript
const toggleFilterDropdown = () => { filterDropdown.classList.toggle("active"); };
```

--------------------------------

### Close filter dropdown when clicking outside

Source: https://github.com/lipis/flag-icons/blob/main/index.html

Adds a document click listener that removes the 'active' class from the filter dropdown if the click target is outside of it.

```JavaScript
document.addEventListener("click", (e) => { if (!filterDropdown.contains(e.target)) { filterDropdown.classList.remove("active"); } });
```
Tokens:
Raw