Components
Country Flag
Circular flag mark for a currency or country code, with letter fallback.
EUR
USD
GBP
CHF
JPY
XXX
Circular flag for an ISO 4217 currency (EUR) or ISO 3166-1 alpha-2 country
(US). Pass exactly one of currencyCode or countryCode. It renders an
Avatar and only chooses what to load: the flag, or
a letter when the code does not resolve.
size is the avatar scale: xs (16px, the default), sm (24px), md
(32px), lg (48px), xl (64px).
Used by Cash Card and Currency.
Usage
import { CountryFlag } from "@sophic/portal-ui/components/ui/country-flag";
<CountryFlag currencyCode="EUR" />
<CountryFlag countryCode="US" />Props
Prop
Type
Default
Changelog
- 4 October 2026 — Flag rim is Avatar
border, off by default. Full notes - 29 September 2026 — Renders an Avatar and uses its sizes. Full notes
- 24 August 2026 — Updated CY (Cyprus) to the official coat of arms on white (replacing the generic circle-flags mark). Full notes
- 4 August 2026 — Renamed from Currency Flag;
codereplaced by mutually exclusivecurrencyCode/countryCode. Full notes - 24 July 2026 — Documented alongside Cash Card / Progress Bar. Full notes