Country flag

A flat vector flag of a country: one 30 × 20 canvas, flat colours, no shading, rounded corners and a hairline inner outline so white flags (Finland, Japan, Poland) do not dissolve into the page. Emblems are reduced to one simple shape at most. React: Flag and PhoneFlag in apps/web/src/components/PhoneFlag.tsx; class .acrm-flag.

Status: candidate — approved by the owner in the prototype on 15 Oct 2026 (picks ACRM-515, ACRM-518), first used on /telefony (acrm !5089).

When to use

  • The identity mark of a phone number in a listing: the country is read from the dialling code (PhoneFlag number="+420 …"), longest match from DIAL_CODES.
  • The head of a record drawer for a phone number (size="lg", the 32px mark box).

When not to use

  • As decoration next to a country name in prose — the name is enough.
  • To mark a language. A flag is a country, not a language.
  • Instead of the entity mark of a record that is not a phone number.

Anatomy

  • Flag — <svg class="acrm-flag" viewBox="0 0 30 20">, 20 × 13.3 px (sm) or 28 × 18.7 px (lg), border-radius: var(--radius-xs).
  • PhoneFlag — the flag inside the .acrm-mark box (24px, or 32px with lg) with the background cleared, so a row of flags and a row of tiles keep the same height.
  • No dialling code: the number is read as Czech (splitDial falls back to DEFAULT_DIAL +420, the same default as DialCodePicker and the phone mask) and shows the Czech flag — it is dialled as Czech (AD 17 Oct 2026).
  • Fallback: a dialling code outside DIAL_CODES draws the grey phone tile (.acrm-mark + device-mobile).

Best practices

Do

  • Read the country from the number itself. Do not store it as a separate field.
  • Keep the flag in the mark slot, where the row already expects a 24px mark.

Don't

  • Don't use emoji flags. Windows renders them as two letters („CZ").
  • Don't copy third-party flag SVGs. The set is drawn in-house; Nucleo was the style reference only.
  • Don't add detail (coats of arms, stars beyond one shape). At 20px it turns into noise.

Content

  • The tooltip of PhoneFlag is the Czech country name from DIAL_CODES („Slovensko").
  • entity-mark — the tile the flag replaces for phone numbers.
  • avatar — the shared 24 / 32px box.

Source: docs/avatar/country-flag.usage.md · GitLab