Figma country flag icons

A flag in an interface is a label doing a job. One appears in the country code field of a phone number input, in a currency switcher, against a shipping destination on an order summary, in the region column of an analytics table.

In every one of those the flag is doing in 20 pixels what a country name needs 80 to do, which is the entire reason to use one and also the reason a wrong flag is embarrassing rather than trivial.

Three shapes, three jobs

Every country is drawn three times: a 20x20px circle, a 20x20px square, and a 30x20px rectangle. The rectangle is the honest one, since real flags have ratios and cropping Nepal into a square is a choice.

The circle is the one that survives being dropped into a list beside avatars and other round things, and it hides the proportion problem entirely. Square sits between them and suits dense tables where a 30px column is 10px too wide.

Pick one shape and hold it across the product. A circle in the phone input and a rectangle in the address form reads as two systems bolted together.

Named for the export, not for the canvas

Layers are named country, then code, then shape: Afghanistan-AF-circle, Japan-JP-rectangle, Brazil-BR-square. Export the frame and the files land with those names, ready for a repo without a rename pass, since Figma uses the layer name for the filename as its export documentation describes.

This is also why the flags are deliberately not built as a variant set. Variants would collapse 783 drawings behind one component and one name, which is tidy in the assets panel and useless the moment you need 261 individual SVGs on disk with predictable filenames.

Codes, and the entries that do not have one

Countries carry their ISO 3166 alpha-2 code, the two-letter identifier behind .fr and .au, which is what your backend is almost certainly already storing. Territories inside another country use their subdivision code instead, so Scotland is GB-SCT, Wales is GB-WLS and Corsica is FR-COR.

A handful of entries carry no code at all, because they have no standing in the standard: the European Union and United Nations flags, the Canary Islands, Sicily, Somaliland, Tibet, Northern Cyprus. Having them in the file is useful. Deciding which of them belongs in a country dropdown is a political question rather than a design one, so make that call on purpose and not by accident.

A flag is not a language

The most common misuse is the language switcher. Spanish is not Spain, English is not the Union Jack, and Portuguese speakers in Brazil have opinions about which flag you chose. W3C’s guidance on guiding users to translated pages recommends labelling each option in the language it points to, so a menu reads Deutsch and Français rather than showing two rectangles.

Keep flags for places: countries, regions, shipping destinations, phone codes. Use text for languages, and your select menus get simpler as a bonus.

The same flags exist outside Figma. Untitled UI country flag icons are published as SVG files and React components at untitledui.com/resources/flag-icons in all three shapes, so the flag chosen in a mockup is the same asset that ends up in the country picker.