CountryFlag

Code

import { CountryFlag } from "@fadymondy/nasaq/web";export const Origin = () => (  <span className="inline-flex items-center gap-2">    <CountryFlag code="SA" />    Saudi Arabia  </span>);

Data Display · beta

Live examples and controls: CountryFlag in the lab.

InstallCopy Anchor Link

npx shadcn@latest add https://docs.nasaqui.com/r/country-flag.json

Draws a country's flag from its ISO 3166-1 alpha-2 code. The flags are SVGs from country-flag-icons (MIT), in the 3:2 ratio. The flag is 1em tall, so it takes the size of the text around it. A thin inset line keeps white and pale flags visible on a white surface.

All flags are one lazy chunk (about 145 KB gzipped). It is fetched the first time any flag renders, then shared by every flag on the page. Until it arrives the flag shows as an empty muted frame of the same size, so nothing moves.

When to useCopy Anchor Link

• Next to a country name or calling code: phone inputs, country and region pickers, shipping addresses, analytics by country.
• Anywhere you would reach for a flag emoji. Windows shows two letters (SA) instead of an emoji flag.

When not to useCopy Anchor Link

• As the only way to name a country: always put the name (or code) next to it.
• For a language. A flag is a country; Arabic is spoken in more than 20 of them. Use the language name.
• In plain text that is not HTML (a notification title, a tab title): use countryFlag(iso) from PhoneInput for the emoji.

ImportCopy Anchor Link

import { CountryFlag } from "@fadymondy/nasaq/web";
// inside this monorepo: "@nasaq/web"

Quick startCopy Anchor Link

import { CountryFlag } from "@fadymondy/nasaq/web";

export const Origin = () => (
  <span className="inline-flex items-center gap-2">
    <CountryFlag code="SA" />
    Saudi Arabia
  </span>
);

AnatomyCopy Anchor Link

CountryFlag     span, aspect 3:2, 1em tall     data-slot="country-flag"
└─ svg          the flag, from country-flag-icons

APICopy Anchor Link

CountryFlagCopy Anchor Link

ExamplesCopy Anchor Link

Sized with the textCopy Anchor Link

import { CountryFlag } from "@fadymondy/nasaq/web";

export const Sizes = () => (
  <div className="flex items-center gap-4">
    <CountryFlag code="AE" className="text-body-sm" />
    <CountryFlag code="AE" className="text-[1.5rem]" />
    <CountryFlag code="AE" className="h-10" />
  </div>
);

A country listCopy Anchor Link

import { CountryFlag, PHONE_COUNTRIES } from "@fadymondy/nasaq/web";

export const Countries = ({ ar }: { ar: boolean }) => (
  <ul className="flex flex-col gap-2">
    {PHONE_COUNTRIES.slice(0, 5).map((c) => (
      <li key={c.iso} className="flex items-center gap-2">
        <CountryFlag code={c.iso} />
        {ar ? c.ar : c.en}
      </li>
    ))}
  </ul>
);

A flag that carries meaning on its ownCopy Anchor Link

import { CountryFlag } from "@fadymondy/nasaq/web";

export const Shipping = () => <CountryFlag code="KW" label="Kuwait" className="text-[1.25rem]" />;

AccessibilityCopy Anchor Link

• Decorative by default (aria-hidden), because a flag should sit next to a name that screen readers already read.
• Pass label only when the flag stands alone; it becomes role="img" with that name. Localise the label.

RTL & i18nCopy Anchor Link

• Flags are never mirrored. In Arabic the flag keeps its drawing; only its place in the row follows the reading direction.
• Country names are not part of this component: take them from PHONE_COUNTRIES (en, ar) or phoneCountryName(iso, locale).

Styling & tokensCopy Anchor Link

• Frame: bg-muted while loading, rounded-[2px], inset hairline foreground/15.
• Slot: country-flag.
• Never recolour, redraw or crop a flag to a circle that hides its emblem.

Do / Don'tCopy Anchor Link

• Do show the country name or code next to the flag.
• Do size it with the surrounding text so it lines up with the name.
• Don't use a flag to stand for a language.
• Don't use flag emoji in UI; they are letters on Windows.

RelatedCopy Anchor Link

• PhoneInput · Badge · Avatar

LabCopy Anchor Link

https://docs.nasaqui.com/?path=/docs/components-data-display-country-flag--docs