No description
Find a file
2021-06-28 19:48:02 +10:00
_layouts Link title text to home page 2021-06-27 12:19:01 +10:00
flags Delete nc.svg 2021-06-28 19:48:02 +10:00
_config.yml Set theme jekyll-theme-cayman 2018-12-06 00:43:05 +11:00
favicon.ico Add favicon.ico 2021-06-14 15:53:10 +10:00
gallery.css Add a gallery page to visualize all available flags 2020-06-10 16:01:38 +01:00
gallery.md Rename all-flags.md to gallery.md 2021-06-23 21:12:31 +10:00
LICENSE Update license copyright 2021-06-24 13:13:30 +10:00
logo.svg Add logo 2021-06-13 20:17:06 +10:00
nc.svg Convert strokes to paths: nc, es 2021-06-28 19:11:14 +10:00
package.json Add package.json & instructions how to install with NPM 2020-12-17 18:40:05 +02:00
README.md Optimize files with svgo 2.3.0 2021-06-28 19:27:30 +10:00
svgo.config.js Optimize files with svgo 2.3.0 2021-06-28 19:27:30 +10:00

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 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.0 or newer).

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

Then run svgo to optimize the SVG files:

svgo -f ./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.