TypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published

React Flag

This package is based on ISO-3166 country codes, contains 245 flags. It comes with minimum styling for easier use in your project. Flags are in svg format but you can use them with emojis as well.


npm install @munkacsimark/react-flag --save


import Flag from '@munkacsimark/react-flag'


Key Value Required Default Format
alpha2 String false* - ISO 3166-1 alpha-2
alpha3 String false* - ISO 3166-1 alpha-2
numeric String false* - ISO 3166-1 numeric
tld String false* - Country code TLD
size String false 'sm' 'xs', 'sm', 'lg', 'xl'
useEmoji Boolean false false -
disableLabel Boolean false false -

* For identifying the country one of the following properties needs to be defined: alpha2, alpha3, numeric, tld. The order of property precedence is the same.

alpha2 and alpha3 should be upper-case letters (e.g. 'US'), numeric codes as string (e.g '840') and tlds starting with a period (e.g. '.us').

There are predefined sizes of container width: 'xs'=18px, 'sm'=24px, 'lg'=36px and 'xl'=48px. Each is using 1.5 ratio for calculating height of container (e.g height of 'sm'=24/1.5=16px).

You can use useEmoji property for using only emojis in accessible way. This feature is based on a11y-react-emoji. disableLabel property makes sense only for emojis, it disables aria-label and sets aria-hidden to true.


Simple usage

<Flag alpha2={'US'} />

Usage with emojis

<Flag alpha2={'US'} useEmoji />


CSS Modules

Since it uses inline styles for now, you need to define width and height with !important.

.flag {
	width: 100px !important;
	height: 50px !important;
	border: 1px solid black;
<Flag alpha2={'US'} className={style.flag} />

Inline styles

<Flag alpha2={'US'} style={{ width: '100px' }} />


You can set styles of child img tag as following:

.flag img {
	object-fit: cover !important;

For making circle flags, use styles like below. Note that, you can align images with object-position rule.

.flag {
	width: 62px !important;
	height: 62px !important;
	border-radius: 50%;
.flag img {
	object-fit: cover !important;
	object-position: -10px center;

When you are using emojis with useEmoji property, you can set the size simply with:

.flag {
	font-size: 64px;


npm i @munkacsimark/react-flag

DownloadsWeekly Downloads






Unpacked Size

7.09 MB

Total Files


Last publish


  • munkacsimark