Question 1

Are these flag icons free to use commercially?

Accepted Answer

Yes. Flag Icons (lipis) and Circle Flags are MIT licensed. Flagpack is also MIT. CoreUI Flags (cif) uses CC0, which is public domain. All four packs allow free commercial use with no royalties. MIT packs require you to preserve the license notice in your project.

Question 2

What is the difference between Flag Icons, Circle Flags, and Flagpack?

Accepted Answer

Flag Icons (lipis) is the most widely used pack — rectangular 4:3 SVGs named by ISO 3166-1 alpha-2 code. Circle Flags are circular cropped versions of the same flags, useful for compact avatar-style UI. Flagpack uses a rounded-rectangle shape and covers 258 countries. Choose rectangular for traditional tables and forms, circular for avatar lists and compact selectors.

Question 3

What is ISO 3166-1 alpha-2 and why do flag icons use it?

Accepted Answer

ISO 3166-1 alpha-2 is the international standard two-letter country code — US for the United States, DE for Germany, JP for Japan, and so on. Flag icon packs name their SVG files by this code so you can load the right flag dynamically from a locale string, a country selector value, or a phone dial-code library without any manual mapping.

Question 4

How do I use flag icons in a React project?

Accepted Answer

Install the flag-icons CSS package (npm install flag-icons), import the stylesheet, then use a span with two classes: fi and fi-[code]. For example,  renders the US flag. For SVG imports, use the circle-flags package or import SVGs directly from the flagpack npm package.

Question 5

How do I use flag icons as pure SVG without a CSS framework?

Accepted Answer

Each flag in this collection is a standalone SVG file. Copy the SVG code directly from the pack page and embed it inline in your HTML or JSX. Inline SVGs scale without blurring, support CSS color overrides where applicable, and work in email templates that block external images.

Question 6

How do I build a language switcher with flag icons?

Accepted Answer

Map your supported locales to ISO 3166-1 codes (en → us, fr → fr, de → de, ja → jp), then render a flag icon next to each locale label. For a dropdown, pair the flag SVG with a visible language name — never rely on the flag alone, since some languages are spoken in multiple countries and some countries have multiple official languages.

Question 7

Are flag icons accessible?

Accepted Answer

SVG flags are decorative when paired with visible text. Set aria-hidden="true" on the flag element and let the accompanying text carry the accessible label. If you use a flag as the sole indicator (no visible language name), add role="img" and aria-label="English" (or the appropriate language name) directly on the SVG.

Question 8

Do flag icons work in dark mode?

Accepted Answer

Most flag SVGs use fixed national colors that should not be inverted. Add the CSS rule .fi { color-scheme: light; } or place flag icons inside a container with a forced light background when dark mode is active. Circular flag packs typically have a white or transparent background that looks clean on both light and dark surfaces.

Question 9

How do I find the SVG for a specific country?

Accepted Answer

Look up the country's ISO 3166-1 alpha-2 code (a quick web search for "ISO code [country name]" works), then find the matching file. On pack pages here, you can search by country name or code directly in the icon grid. Common codes: US, GB, DE, FR, JP, CN, IN, BR, CA, AU.

Question 10

Can I use these flags in a mobile app?

Accepted Answer

Yes. SVG flags work in React Native via the react-native-svg library, and in Flutter via the flutter_svg package. For iOS and Android native apps, export the SVG to a vector drawable (Android) or PDF asset (iOS) using your build tooling. The simple geometry of flag icons converts cleanly to any raster size.

Free SVG Country Flag Icons — Flag Icons, Circle Flags & Flagpack

Icon Packs

Flag Icons

Circle Flags

Flagpack

CoreUI Flags

Common Use Cases

Frequently Asked Questions

More Collections