# flag-icon-css

> > A curated collection of all country flags in SVG — plus the CSS for easier integration. See the [demo](https://flagicons.lipis.dev).

Latest version **4.1.7** (published 2021-12-15) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install flag-icon-css
pnpm add flag-icon-css
yarn add flag-icon-css
bun add flag-icon-css
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 4.1.7 |
| Published | 2021-12-15 |
| First published | 2015-09-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.1 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 12396 |
| Author | Panayiotis Lipiridis |
| Maintainers | lipis |

## Links

- npm: https://www.npmjs.com/package/flag-icon-css
- Repository: https://github.com/lipis/flag-icons
- Homepage: https://github.com/lipis/flag-icons#readme
- Issues: https://github.com/lipis/flag-icons/issues
- npm.io page: https://npm.io/package/flag-icon-css

## Recent versions

- 4.1.7 (latest) — 2021-12-15
- 4.1.6 — 2021-11-25
- 4.1.5 — 2021-11-02
- 4.1.4 — 2021-10-28
- 4.1.3 — 2021-10-27
- 4.1.1 — 2021-10-27
- 4.1.0 — 2021-10-26
- 4.0.0 — 2021-10-22
- 3.5.0 — 2020-06-10
- 3.4.6 — 2020-02-04
- 3.4.5 — 2019-10-23
- 3.4.2 — 2019-10-01
- 3.4.0 — 2019-09-20
- 3.3.0 — 2019-02-24
- 3.2.1 — 2018-10-19
- … 14 more at https://npm.io/package/flag-icon-css/versions

## README

# flag-icons

> A curated collection of all country flags in SVG — plus the CSS for easier integration. See the [demo](https://flagicons.lipis.dev).

## Install

You can either [download](https://github.com/lipis/flag-icons/archive/main.zip) the whole project as is or install it via npm or Yarn:

```bash
npm install --dev flag-icon-css
# or
yarn add --dev flag-icon-css
```

## Usage

For using the flags inline with text add the classes `.flag-icon` and `.flag-icon-xx` (where `xx` is the [ISO 3166-1-alpha-2 code](https://www.iso.org/obp/ui/#search/code/) of a country) to an empty `<span>`. If you want to have a squared version flag then add the class `flag-icon-squared` as well. Example:

```html
<span class="flag-icon flag-icon-gr"></span>
<span class="flag-icon flag-icon-gr flag-icon-squared"></span>
```

You could also apply this to any element, but in that case you'll have to use the `flag-icon-background` instead of `flag-icon` and you're set. This will add the correct background with the following CSS properties:

```css
background-size: contain;
background-position: 50%;
background-repeat: no-repeat;
```

Which means that the flag is just going to appear in the middle of an element, so you will have to set manually the correct size of 4 by 3 ratio or if it's squared add also the `flag-icon-squared` class.

## Development

Run the `yarn` to install the dependencies after cloning the project and you'll be able to:

To build `*.less` files

```bash
$ yarn build
```

To serve it on `localhost:8000`

```bash
$ yarn start
```

To have only specific countries in the css file, remove the ones that you don't need from the [`flag-icons-list.less`](less/flag-icons-list.less) file and build it again.

## Credits

This project wouldn't exist without the awesome and now deleted collection of SVG flags by [koppi](https://github.com/koppi).

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