square-flags 
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.
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 available here.
NPM
If you want to install this package as a dependency, you can add it to your project with:
npm install --save @kapowaz/square-flags
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.
-
#584528
Dark Brown -
#85693D
Brown -
#496E2D
Dark Green -
#6DA544
Green -
#338AF3
Light Blue -
#0052B4
Blue -
#002266
Navy -
#4A1F63
Purple -
#9C27B0
Violet -
#F5A9B8
Pink -
#751A46
Dark Pink -
#A2001D
Dark Red -
#D80027
Bright Red -
#FF9811
Gold -
#FFC635
Dark Yellow -
#FFDA44
Yellow -
#333333
Black -
#818085
Dark Grey -
#ACABB1
Mid Grey 3 -
#BDBCC1
Mid Grey 2 -
#DEDDE0
Mid Grey 1 -
#F3F3F3
Light Grey -
#EEEEEE
White -
#FCFCFC
Bright White
CSS Custom Properties
If you want to use these flags in a site or application that has a specific colour scheme you want to follow, you can use CSS Custom Properties (‘CSS variables’) to override the default colour scheme. To do this, define values for any or all of the following named variables (the default colours are shown here):
:root {
--flag-palette-black: #333333;
--flag-palette-blue: #0052b4;
--flag-palette-bright-red: #d80027;
--flag-palette-bright-white: #fcfcfc;
--flag-palette-brown: #85693d;
--flag-palette-dark-brown: #584528;
--flag-palette-dark-green: #496e2d;
--flag-palette-dark-grey: #818085;
--flag-palette-dark-pink: #751a46;
--flag-palette-dark-red: #a2001d;
--flag-palette-dark-yellow: #ffc635;
--flag-palette-gold: #ff9811;
--flag-palette-green: #6da544;
--flag-palette-light-blue: #338af3;
--flag-palette-light-grey: #f3f3f3;
--flag-palette-mid-grey-1: #dedde0;
--flag-palette-mid-grey-2: #bdbcc1;
--flag-palette-mid-grey-3: #acabb1;
--flag-palette-navy: #002266;
--flag-palette-pink: #f5a9b8;
--flag-palette-purple: #4a1f63;
--flag-palette-violet: #9c27b0;
--flag-palette-white: #eeeeee;
--flag-palette-yellow: #ffda44;
}
Note that this only works when the flags are injected as SVG elements directly
into the same page as your custom CSS properties; if you are including flags as
images using an <img>
tag they will retain the default palette. If for any
reason you need a version of these SVG files without the CSS custom
properties, you can find the equivalent flags under flags-original/
.
Contributing
The design files for this set of flags can be found on [Figma as part of the Circle Flags shared library][circle-flags-figma]. 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 should export two copies of your new/updated flag design: one to flags/
,
and one to flags-original/
, then run the scripts to optimise the SVG assets,
and update any explicit hexadecimal colour codes to their named CSS Custom
Property values (you should run yarn svgo
last, to ensure the optimal SVG
output):
$ yarn
$ yarn css-vars
$ yarn svgo
Then commit the changes, and submit them as a pull request.
Running the documentation site locally
If for any reason you want to test running the github-pages site locally, you can do so with:
bundle install
bundle exec jekyll serve
License
This project is released under the MIT license.