FlagIcon

The `FlagIcon` component renders a country flag using ISO-3166 country codes. Supports adjustable sizes, rounded borders, and lazy loading.

Basic Usage

Render a country flag by ISO code.

Sizes

Control flag size with the size prop.

sm

md (default)

lg

Appearance

Each flag has a subtle border and surface background for consistency with Gatzi’s theme.

Props

Supported properties and default values.

code?: string – Two-letter ISO 3166 country code. Default: "us"
size?: 'sm' | 'md' | 'lg' – Defines the flag dimensions. Default: "md"
className?: string – Extends Tailwind classes for custom styles.
...props – Inherits all native <span> attributes.

Context Example

How to use flags alongside text or other components.

Español (México)

English (US)

Français