Flag for Figma

Flag UI component patterns

A flag can help people scan a country or region selector, such as a shipping destination or market menu. Include the country or region name in text beside the image; the symbol alone may not be familiar or sufficient to make a selection confidently. See the related select component for Figma when planning the control around the flag.

Flag variants and interaction states

Pair flags with country or locale names, and never rely on a flag alone to communicate language or region. Keep labels concise and use spacing or icon cues to reinforce the message without relying on color alone.

Design flag patterns for product UI

In Figma, compare the component variants in a real product screen. Check spacing, contrast and labels across relevant states, then adapt the pattern to the team's design system. Document the selected variant and relevant states so the pattern stays consistent across screens.