A collection of circular SVG country flags.
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">
To view all the available flags, check the gallery.
If you're using React, you may want to try the react-circle-flags package.
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
To contribute, you need to have the latest version of svgo installed.
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.
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:
#002266
: dark blue (only one usage: Chad, to differentiate from Romania)#4a1f63
: purple (only one usage: Balearic Islands)#751a46
: dark pink (only one usage: Qatar)
This project is released under the MIT license.