square-flags square-flags animated logo

A collection of circular square SVG country flags, based on circle-flags, by HatScripts.

Why square? What’s different?

It’s a popular request for the original circle-flags project to offer square variants, but in a lot of cases the change to the original flag design is non-trivial. For simple designs like tricolours you can simply remove the mask, but a lot of the original flags carefully position elements to appear within the silhouette of a circle; once that circle mask is removed, the elements seem misplaced or concentrated around the centre of the flag.

So, I’ve taken the original artwork and reworked them to suit a square shape better. I’ve also taken the opportunity to make a few tweaks here and there to colours (adding a new middle dark yellow that has better contrast against light backgrounds), as well as building the whole thing out in Figma using components.

Using the flag for Australia, here’s an example of the kind of change: the Union Jack has been replaced with the full design at a quarter scale, the background colour has been changed to Navy to more accurately reflect the original, and the position of the largest star has been moved to the left, closer to its true location.

A comparison of the circle-flags and square-flags equivalents for the flag of Australia

Usage

https://kapowaz.github.io/square-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://kapowaz.github.io/square-flags/flags/br.svg" width="48">
<img src="https://kapowaz.github.io/square-flags/flags/cn.svg" width="48">
<img src="https://kapowaz.github.io/square-flags/flags/gb.svg" width="48">
<img src="https://kapowaz.github.io/square-flags/flags/id.svg" width="48">
<img src="https://kapowaz.github.io/square-flags/flags/in.svg" width="48">
<img src="https://kapowaz.github.io/square-flags/flags/ng.svg" width="48">
<img src="https://kapowaz.github.io/square-flags/flags/ru.svg" width="48">
<img src="https://kapowaz.github.io/square-flags/flags/us.svg" width="48">

…produces this:

To view all the available flags, check the gallery.

React

If you’re using React, an equivalent react-square-flags package is in the works.

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/kapowaz/square-flags

Contributing

The design files for this set of flags can be found on Figma as part of the Square Flags shared library. If you wish to make a contribution, create a copy of that library and add your changes as a component, then create a pull request including the exported SVG file and a link to your copy of the Figma file, so that the original can be updated.

You will also need to ensure you have have the latest version of svgo installed; when exporting SVG files, run svgo on the flags/ directory:

svgo ./flags --recursive --config=svgo.config.js

Then commit the changes, and submit them as a pull request along with your Figma file.

The color palette

Like HatScript’s flag set, this set of flags uses the following color palette (with a few small additions, such as Dark Yellow). Since the original designs are in Figma, if you have a proposed modification to an existing flag, create an issue and I’ll try and amend the original Figma file.

License

This project is released under the MIT license.