Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

HatScripts/circle-flags

Repository files navigation

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.

SolidJS

If you're using SolidJS, you may want to try the solid-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

Userscripts

Contributing

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.

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.

Morty Proxy This is a proxified and sanitized view of the page, visit original site.