Flags
How to display country flags in interfaces.
Overview
Use country-flag emoji to represent countries and territories in the interface.
Render them in the font Noto Color Emoji for a consistent appearance across platforms.
Usage
Ensure Noto Color Emoji is installed in your project. See Install fonts.
Without the Noto Color Emoji font installed, flags will not render in the desired style.
Use the class name font-emoji on the element that displays the flag emoji:
<span className="font-emoji">🇺🇳</span>Example
🇺🇳 United Nations
<div className="flex items-center gap-2">
<span className="font-emoji text-2xl">🇺🇳</span>
United Nations
</div>Available flags
Below are all the countries in which WFP is present. Click a flag to copy the emoji to your clipboard. For more flags, see Unicode country flags.