Awesome Open Source
Awesome Open Source

circle-flags

A collection of circular SVG country flags.

Usage

https://hatscripts.github.io/circle-flags/flags/xx.svg

(Where xx is the ISO 3166-1 alpha-2 code of a country).

For example, the following code:

<img src="https://hatscripts.github.io/circle-flags/flags/br.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/cn.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/gb.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/id.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/in.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/ng.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/ru.svg" width="48">
<img src="https://hatscripts.github.io/circle-flags/flags/us.svg" width="48">

...produces this:

To view all the available flags, check the gallery.

React

If you're using React, you may want to try the react-circle-flags package.

NPM

If you want to install this package as dependency, you can install it from this GitHub repository:

npm install --save https://github.com/HatScripts/circle-flags

Contributing

To contribute, you need to have svgo installed (version 1.2.0 or newer).

First, edit the relevant SVG files in the flags/ directory.

Then run svgo to optimize the SVG files:

svgo ./flags --recursive --config=svgo.yml

Then commit the changes, and submit them as a pull request.

License

This project is released under the MIT license.


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
css (7,240
react (5,295
svg (550
design (370
icons (283
minimal (116
svg-icons (66
minimalist (60
icon-pack (44
countries (43
circle (41
languages (38
flags (26
country (26
circular (22
minimalistic (19
states (17
svgo (17

Find Open Source By Browsing 7,000 Topics Across 59 Categories