https://github.com/catamphetamine/country-flag-icons
Vector (*.svg) country flag icons in 3x2 aspect ratio
https://github.com/catamphetamine/country-flag-icons
Last synced: 4 months ago
JSON representation
Vector (*.svg) country flag icons in 3x2 aspect ratio
- Host: GitHub
- URL: https://github.com/catamphetamine/country-flag-icons
- Owner: catamphetamine
- License: mit
- Created: 2020-01-02T21:21:02.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2025-02-06T11:17:45.000Z (4 months ago)
- Last Synced: 2025-02-06T12:27:56.368Z (4 months ago)
- Language: HTML
- Homepage: https://catamphetamine.github.io/country-flag-icons/3x2/
- Size: 922 KB
- Stars: 111
- Watchers: 4
- Forks: 30
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# country-flag-icons
[](https://www.npmjs.com/package/country-flag-icons)
[](https://www.npmjs.com/package/country-flag-icons)
Vector country flag icons in `3:2` aspect ratio.
* Optimized for small size on screen (little detail, minimalism).
* Small file size.
* Comes with React components for all flags (exported from `/react` subpackage).
[See `3:2` flags](http://catamphetamine.gitlab.io/country-flag-icons/3x2)
## Install
```
npm install country-flag-icons --save
```
## API
### `hasFlag(country: string): boolean`
Tells whether there's a flag for a country.
```js
import { hasFlag } from 'country-flag-icons'
hasFlag('US') === true
hasFlag('ZZ') === false
```
### `countries: string[]`
The list of supported countries.
```js
import { countries } from 'country-flag-icons'
countries.includes('US') === true
countries.includes('ZZ') === false
```
### Web
Flags can be linked directly from this library's [gitlab pages website](https://catamphetamine.gitlab.io/country-flag-icons), or from a [github pages mirror](https://purecatamphetamine.github.io/country-flag-icons), which seems a tiny bit faster.
```html
```
Flags can also be used in the form of CSS classes imported from [`country-flag-icons/3x2/flags.css`](https://unpkg.com/country-flag-icons/3x2/flags.css) where all flag icons are inlined as `background-image` data URLs. CSS flag icon height can be set via `--CountryFlagIcon-height` [CSS variable](https://caniuse.com/#feat=css-variables).
What if my project doesn't use CSS variables?
####
In that case, the default flag icon height is `1em`, and to change it, just set a `font-size`:
```css
/* Set flag icon height to 24px. */
[class*=' flag:'], [class^='flag:'] {
font-size: 24px;
}
```
### Unicode
[Unicode flag icons](https://blog.emojipedia.org/emoji-flags-explained/) are available under the `/unicode` export.
```js
import getUnicodeFlagIcon from 'country-flag-icons/unicode'
getUnicodeFlagIcon('US') === '🇺🇸'
getUnicodeFlagIcon('ZZ') === '🇿🇿'
```
Unicode flag icons ("Regional Indicator Symbols") were [introduced](https://esham.io/2014/06/unicode-flags) in 2010 in Unicode version 6.0.
Older operating systems might not support Unicode flags, either rendering "missing" (rectangle) characters (if their system doesn't support country flags), or displaying two-letter country codes instead of emoji flag images. For example, Windows 10 currently (01.01.2020) doesn't support Unicode country flags, and displays two-letter country codes instead of emoji flag images.
### React
React components for all flags are available at `/react/3x2` export.
```js
import { US } from 'country-flag-icons/react/3x2'
```
Or directly, if your bundler doesn't support tree shaking:
```js
import US from 'country-flag-icons/react/3x2/US'
```
### Vue
There's an [experimental component](https://gitlab.com/catamphetamine/country-flag-icons/-/issues/26) for Vue 3.
### String
All flags can also be imported as strings:
```js
import { US } from 'country-flag-icons/string/3x2'
console.log(US) // > ''
```
Or directly, if your bundler doesn't support tree shaking:
```js
import US from 'country-flag-icons/string/3x2/US'
console.log(US) // > '