circle-flags
circle-flags copied to clipboard
A collection of 400+ minimal circular SVG country, state and language flags
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 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:
-
#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)
License
This project is released under the MIT license.