Flags

Loading asset library…

UsageCopy Anchor Link

import { DZFlag } from '@commenda/pathfinder/flags';
<DZFlag size={16} label="Algeria" />;

ASSET-FLAG-01: Sizes are 12, 16 (default), 20, and 24. Preserve the round crop and inside 0.5px Soft Pearl 300 hairline at every size; do not recolor the flag.

ASSET-FLAG-02: Flags represent countries or territories, not languages. Display a country name when identification matters. Figma includes 256 codes, including GE-AB, GE-OS, and XK; codes are not constrained to two characters.

For dynamic country data, explicitly import the registry-backed component. It includes the flag collection; use named imports when codes are known in advance.

import { CountryFlag } from '@commenda/pathfinder/flags/dynamic';
<CountryFlag code="US" label="United States" />;

Codes are trimmed and case-normalized. Unknown codes render a neutral circle without inventing a country identity. Provide your own localized label, such as “Country unavailable.”