Components › Identity › Identity marks › Country flag

Country flag

beta

Flat vector flag of a country (30 × 20, rounded, hairline outline) — the mark of a phone number by its dialling code.

Owner-approved 15 Oct 2026 in prototype proto/telefony-pin-puk (picks ACRM-515, ACRM-518: „vlajky úplně jednoduše, plošně vektorově", style reference nucleoapp.com/svg-flag-icons — own drawing, no Nucleo SVG copied, licence unclear). First use: /telefony identity column and drawer head (acrm !5089). Covers the 50 countries of DIAL_CODES; unknown code falls back to the grey phone tile. Before beta: move to packages/ui next to EntityMark, stories (all flags, sizes sm/lg, fallback), props. DialCodePicker („CZ +420 ▾") stays WITHOUT a flag — owner decision 15 Oct 2026. Registry repaired 17 Oct 2026 (review F1, F10): Flag/PhoneFlag now live in packages/ui/src/components/CountryFlag.tsx and are exported from @acrm/ui. Registry repaired 17 Oct 2026 (review F3): mapped existing Ladle stories. Beta 17 Oct 2026 (AD): moved to @acrm/ui next to EntityMark with stories Default · Variants · Sizes · States · Composition + 10 light/dark baselines (acrm !5124, 445b2e68b). AD 17 Oct 2026: a number without a dialling code 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; the grey phone tile stays only for a code outside DIAL_CODES. Canon after a dev check of /telefony with real data 1440/390 light/dark.

Used in 2 files · 2 areas · 2× — pages/TelefonyPage, pages/telefony

@acrm/ui <Flag> <PhoneFlag>.acrm-flagSourceStory
ExamplesCodeUsageAccessibilityChangelog

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