react-country-flag

The ReactCountryFlag component renders a country flag. By default, it renders an emoji flag. You can switch to SVG flags by adding the svg prop. All standard HTML attributes (like className, style, aria-label, title) are passed directly to the underlying element.

import React from "react"
import ReactCountryFlag from "react-country-flag"

function ExampleComponent() {
    return (
        <div>
            {/* Default emoji flag */}
            <ReactCountryFlag countryCode="US" />

            {/* Styled emoji flag with accessibility label */}
            <ReactCountryFlag
                className="emojiFlag"
                countryCode="US"
                style={{
                    fontSize: '2em',
                    lineHeight: '2em',
                }}
                aria-label="United States"
            />

            {/* Basic SVG flag */}
            <ReactCountryFlag countryCode="US" svg />

            {/* Styled SVG flag with title */}
            <ReactCountryFlag
                countryCode="US"
                svg
                style={{
                    width: '2em',
                    height: '2em',
                }}
                title="US"
            />

            {/* SVG flag using a custom CDN URL */}
            <ReactCountryFlag
                countryCode="US"
                svg
                cdnUrl="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/flags/1x1/"
                cdnSuffix="svg"
                title="US"
            />
        </div>
    )
}

export default ExampleComponent