# Flags

Package: @commenda/pathfinder@0.1.0
Page: /docs/assets/flags

<AssetExplorer collection="flags" />

## Usage [#usage]

```tsx
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.

```tsx
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.”