# react-world-flags

> SVG flags of the world for react

Latest version **1.6.0** (published 2023-10-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-world-flags
pnpm add react-world-flags
yarn add react-world-flags
bun add react-world-flags
```

## Health

**Score 33/100 (F)** — status: abandoned.

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support; large bundle.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 1.6.0 |
| Published | 2023-10-02 |
| First published | 2017-04-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | separate (@types/react-world-flags) |
| Module format | CommonJS |
| Dependencies | 3 |
| Unpacked size | 10.3 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 173 |
| Author | SMU |
| Maintainers | smucode |
| Keywords | react, reactjs, world, flag, flags, svg |

## Links

- npm: https://www.npmjs.com/package/react-world-flags
- Repository: https://github.com/smucode/react-world-flags
- Homepage: https://github.com/smucode/react-world-flags#readme
- Issues: https://github.com/smucode/react-world-flags/issues
- npm.io page: https://npm.io/package/react-world-flags

## Dependencies (3)

- [svgo](https://npm.io/package/svgo.md) ^3.0.2
- [world-countries](https://npm.io/package/world-countries.md) ^5.0.0
- [svg-country-flags](https://npm.io/package/svg-country-flags.md) ^1.2.10

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.6.0 (latest) — 2023-10-02
- 2.0.0-beta.4 (beta) — 2025-12-13
- 2.0.0-beta.3 — 2025-12-13
- 2.0.0-beta.2 — 2025-12-13
- 2.0.0-beta.1 — 2025-12-13
- 2.0.0-beta.0 — 2025-12-13
- 1.5.1 — 2022-08-04
- 1.5.0 — 2022-05-12
- 1.4.0 — 2020-07-27
- 1.3.0 — 2019-02-04
- 1.2.4 — 2018-07-17
- 1.2.3 — 2018-07-10
- 1.2.2 — 2018-07-05
- 1.2.1 — 2018-07-02
- 1.2.0 — 2018-05-27
- … 5 more at https://npm.io/package/react-world-flags/versions

## README

[![CircleCI](https://circleci.com/gh/smucode/react-world-flags.svg?style=svg)](https://circleci.com/gh/smucode/react-world-flags)


# react-world-flags

Easy to use SVG flags of the world for react

[Demo](https://smucode.github.io/react-world-flags/)

## Installation

```
npm install react-world-flags
```

## Usage

```javascript
import Flag from 'react-world-flags'

<Flag code={ code } />
```

Where `code` is the [two letter](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2), [three letter](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-3) or [three digit](https://en.wikipedia.org/wiki/ISO_3166-1_numeric) country code.

You can also pass an optional `fallback` which renders if the given code doesn't correspond to a flag:

```javascript
import Flag from 'react-world-flags'

<Flag code="foo" fallback={ <span>Unknown</span> }/>
```

All props but `code` and `fallback` are passed through to the rendered `img`

```javascript
<Flag code="nor" height="16" />

// <img src="data:image/svg+xml..." height="16">
```

## Caveat

The bundle contains all flags of the world and is about 1.3 MB gzipped.

SVG's are inlined using [Data_URIs](https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs).

---
_Source: https://npm.io/package/react-world-flags · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._