https://lipis.github.io/flag-icon-css

:flags: A curated collection of all country flags in SVG — plus the CSS for easier integration
https://lipis.github.io/flag-icon-css

country country-flags css icon-css svg

Last synced: 3 months ago
JSON representation

:flags: A curated collection of all country flags in SVG — plus the CSS for easier integration

• Host: GitHub
• URL: https://lipis.github.io/flag-icon-css
• Owner: lipis
• License: mit
• Created: 2013-09-25T16:39:58.000Z (about 11 years ago)
• Default Branch: main
• Last Pushed: 2024-05-17T02:14:59.000Z (6 months ago)
• Last Synced: 2024-05-20T01:13:49.845Z (6 months ago)
• Topics: country, country-flags, css, icon-css, svg
• Language: CSS
• Homepage: https://flagicons.lipis.dev
• Size: 15.7 MB
• Stars: 10,263
• Watchers: 157
• Forks: 1,817
• Open Issues: 21
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-icons - flag-icon-css - A collection of all country flags in SVG — plus the CSS for easier integration. (Map / Countries)

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 flag-icons

# or

yarn add flag-icons

```

## Usage

First, you need to import css:

```js

import "/node_modules/flag-icons/css/flag-icons.min.css";

```

or use CDN:

```html

```

For using the flags inline with text add the classes `.fi` and `.fi-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 ``. If you want to have a squared version flag then add the class `fis` as well. Example:

```html

 

```

You could also apply this to any element, but in that case you'll have to use the `fib` instead of `fi` 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 `*.scss` 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.scss`](sass/_flag-icons-list.scss) 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).

- Thank you [Andrejs Abrickis](https://twitter.com/andrejsabrickis) for providing the `flag-icons` name on [npm](https://www.npmjs.com/package/flag-icons).