# Flags

Published: August 29, 2026

Version: ^2.18.0

<img loading="lazy" class="rounded-2xl border dark:border-zinc-700" src="/img/blog/2_18_0_flags_hero.png" alt="A row of country flags from around the world" />

Flux now ships with a **Flag** component: consistent 3:2 SVG artwork for every ISO 3166-1 country and territory, plus Kosovo. Every flag is served locally from your app.

```blade
<flux:flag country="US" />
```

## API overview

Pass a two-letter country code and Flux handles the rest. Codes are case-insensitive, and every flag uses the same sizing API:

```blade
<flux:flag country="JP" size="xl" />
<flux:flag country="BR" size="lg" />
<flux:flag country="DE" size="md" />
<flux:flag country="ZA" />
```

Need a compact circular crop instead? Add the `circle` prop:

```blade
<flux:flag country="FR" circle />
```

The bundled SVGs are served through a cacheable, versioned URL, so a page full of flags stays light with no third-party image host involved.

## Bring your own

Need a state, province, organization, or historical flag? Pass any image URL using `src`:

```blade
<flux:flag src="/img/flags/california.svg" alt="California" />
```

## Accessibility

Flags are decorative by default and render with an empty `alt`. Only add alternative text when the flag communicates something that isn't already in nearby text.

---

[Check out the flag docs →](https://fluxui.dev/components/flag)