Awesome Open Source
Awesome Open Source

circle-flags circle-flags animated logo

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 a 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 2.3.1 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.config.js

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

The color palette

Submitted flags should conform to the following color palette.
Try to match the flag's original colors with the nearest color from the palette.

  • #eeeeee: white
  • #acabb1: gray
  • #333333: black
  • #a2001d: dark red
  • #d80027: red
  • #ff9811: orange
  • #ffda44: yellow
  • #6da544: green
  • #496e2d: dark green
  • #338af3: light blue
  • #0052b4: blue

Special cases:

License

This project is released under the MIT license.

Related Awesome Lists
Top Programming Languages
Top Projects

Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Html (246,103
Reactjs (164,328
Language (29,990
Icons (15,053
Countries (7,928
Minimalistic (5,215
Flags (4,284
Svg Icons (671
Icon Pack (383
Svgo (246
Round (98
Country Flags (57
Svg Files (49