# Icon flag

## Overview

_[Design to fill]_

- **When to use**: _[Design to fill]_
- **When not to use**: _[Design to fill]_

## Anatomy

_[Design to fill]_

## Variants

| Prop   | Effect              |
| ------ | ------------------- |
| `size` | Sets the flag size. |

## Props / API

### `IconFlag`

| Prop   | Type                  | Default  | Description                                  |
| ------ | --------------------- | -------- | -------------------------------------------- |
| `code` | `IconFlagCode`        | -        | The country/region flag to render. Required. |
| `size` | `'small' \| 'medium'` | `medium` | The flag size.                               |

Extends `HTMLAttributes<HTMLSpanElement>`. All standard attributes are forwarded to the wrapping `<span>` via `...rest`.

## Code examples

```tsx
import { IconFlag } from "@mylighthouse/prism-react";

export default function IconFlagExample(): React.JSX.Element {
  return <IconFlag code="us" size="medium" />;
}
```

## A11y intent

_[Design to fill]_

- When the flag is decorative (sits next to a visible country/language name), add `aria-hidden="true"` so it is skipped by assistive technology.
- When the flag is the only content conveying meaning, give it an accessible name: `role="img"` with `aria-label` naming the country or language, or a visually hidden label on the parent control.
- A flag is not a reliable proxy for a language. Pair it with the language name where the flag communicates locale.

## Cross-references

- **[Icon](./icon.md)**: the general-purpose UI icon with size and color variants.
- **[Icon brand](./icon-brand.md)**: brand and third-party logos.