{"id":29073912,"url":"https://github.com/kapowaz/square-flags","last_synced_at":"2025-06-27T15:05:26.964Z","repository":{"id":200527803,"uuid":"705716082","full_name":"kapowaz/square-flags","owner":"kapowaz","description":"A collection of 400+ minimalist square SVG country, state and language flags","archived":false,"fork":false,"pushed_at":"2025-05-23T20:03:26.000Z","size":1317,"stargazers_count":70,"open_issues_count":1,"forks_count":13,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-06-27T15:02:10.302Z","etag":null,"topics":["countries","country","country-flags","design","figma","flags","icon-pack","icons","languages","minimal","minimalist","react","square","states","svg","svg-files","svg-icons","svgo"],"latest_commit_sha":null,"homepage":"https://kapowaz.github.io/square-flags/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kapowaz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2023-10-16T14:55:35.000Z","updated_at":"2025-06-16T02:35:26.000Z","dependencies_parsed_at":"2023-10-27T12:29:30.620Z","dependency_job_id":"cd9f1f3d-df0d-44d6-a01e-59249bd80849","html_url":"https://github.com/kapowaz/square-flags","commit_stats":null,"previous_names":["kapowaz/square-flags"],"tags_count":20,"template":false,"template_full_name":null,"purl":"pkg:github/kapowaz/square-flags","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kapowaz%2Fsquare-flags","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kapowaz%2Fsquare-flags/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kapowaz%2Fsquare-flags/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kapowaz%2Fsquare-flags/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kapowaz","download_url":"https://codeload.github.com/kapowaz/square-flags/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kapowaz%2Fsquare-flags/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":262279043,"owners_count":23286541,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["countries","country","country-flags","design","figma","flags","icon-pack","icons","languages","minimal","minimalist","react","square","states","svg","svg-files","svg-icons","svgo"],"created_at":"2025-06-27T15:01:25.405Z","updated_at":"2025-06-27T15:05:26.954Z","avatar_url":"https://github.com/kapowaz.png","language":"JavaScript","readme":"# square-flags \u003cimg src=\"logo.svg\" alt=\"square-flags animated logo\" align=\"right\"\u003e\n\nA collection of ~~circular~~ square SVG country flags, based on\n[circle-flags][circle-flags], by HatScripts.\n\n## Why square? What’s different?\n\nIt’s a [popular request][circle-flags-issues] for the original circle-flags\nproject to offer square variants, but in a lot of cases the change to the\noriginal flag design is non-trivial. For simple designs like tricolours you can\nsimply remove the mask, but a lot of the original flags carefully position\nelements to appear within the silhouette of a circle; once that circle mask is\nremoved, the elements seem misplaced or concentrated around the centre of the\nflag.\n\nSo, I’ve taken the original artwork and reworked them to suit a square shape\nbetter. I’ve also taken the opportunity to make a few tweaks here and there to\ncolours (adding a new middle dark yellow that has better contrast against light\nbackgrounds), as well as building the whole thing out in Figma using components.\n\nUsing the flag for Australia, here’s an example of the kind of change: the Union\nJack has been replaced with the full design at a quarter scale, the background\ncolour has been changed to Navy to more accurately reflect the original, and the\nposition of the largest star has been moved to the left, closer to its true\nlocation.\n\n\u003cimg src=\"https://kapowaz.github.io/square-flags/images/au-comparison.svg\" width=\"168\" alt=\"A comparison of the circle-flags and square-flags equivalents for the flag of Australia\" /\u003e\n\n## Usage\n\n```text\nhttps://kapowaz.github.io/square-flags/flags/xx.svg\n```\n\n(Where `xx` is the [ISO 3166-1 alpha-2 code][iso-3166-1] of a country).\n\nFor example, the following code:\n\n```html\n\u003cimg src=\"https://kapowaz.github.io/square-flags/flags/br.svg\" width=\"48\" /\u003e\n\u003cimg src=\"https://kapowaz.github.io/square-flags/flags/cn.svg\" width=\"48\" /\u003e\n\u003cimg src=\"https://kapowaz.github.io/square-flags/flags/gb.svg\" width=\"48\" /\u003e\n\u003cimg src=\"https://kapowaz.github.io/square-flags/flags/id.svg\" width=\"48\" /\u003e\n\u003cimg src=\"https://kapowaz.github.io/square-flags/flags/in.svg\" width=\"48\" /\u003e\n\u003cimg src=\"https://kapowaz.github.io/square-flags/flags/ng.svg\" width=\"48\" /\u003e\n\u003cimg src=\"https://kapowaz.github.io/square-flags/flags/ru.svg\" width=\"48\" /\u003e\n\u003cimg src=\"https://kapowaz.github.io/square-flags/flags/us.svg\" width=\"48\" /\u003e\n```\n\n...produces this:\u003cbr/\u003e\u003cbr/\u003e\n\u003cimg src=\"https://kapowaz.github.io/square-flags/flags/br.svg\" width=\"48\"\u003e\n\u003cimg src=\"https://kapowaz.github.io/square-flags/flags/cn.svg\" width=\"48\"\u003e\n\u003cimg src=\"https://kapowaz.github.io/square-flags/flags/gb.svg\" width=\"48\"\u003e\n\u003cimg src=\"https://kapowaz.github.io/square-flags/flags/id.svg\" width=\"48\"\u003e\n\u003cimg src=\"https://kapowaz.github.io/square-flags/flags/in.svg\" width=\"48\"\u003e\n\u003cimg src=\"https://kapowaz.github.io/square-flags/flags/ng.svg\" width=\"48\"\u003e\n\u003cimg src=\"https://kapowaz.github.io/square-flags/flags/ru.svg\" width=\"48\"\u003e\n\u003cimg src=\"https://kapowaz.github.io/square-flags/flags/us.svg\" width=\"48\"\u003e\n\nTo view all the available flags, check [the gallery][gallery].\n\n### React\n\nIf you're using [React](https://reactjs.org), an equivalent `react-square-flags`\npackage is [available here][react-square-flags].\n\n### NPM\n\nIf you want to install this package as a dependency, you can add it to your\nproject with:\n\n```sh\nnpm install --save @kapowaz/square-flags\n```\n\n### The color palette\n\nLike HatScript’s flag set, this set of flags uses the following color palette\n(with a few small additions, such as Dark Yellow). Since the original designs\nare in Figma, if you have a proposed modification to an existing flag, create an\nissue and I’ll try and amend the original Figma file.\n\n\u003cul class=\"colors\"\u003e\n{% for color in site.data.colors %}\n  \u003cli\u003e\n    \u003cspan class=\"color-marker\" style=\"background-color: {{ color.hex }};\"\u003e\u003c/span\u003e\n    \u003ccode\u003e{{ color.hex }}\u003c/code\u003e {{ color.name }}\n  \u003c/li\u003e\n{% endfor %}\n\u003c/ul\u003e\n\n#### CSS Custom Properties\n\nIf you want to use these flags in a site or application that has a specific\ncolour scheme you want to follow, you can use [CSS Custom Properties][css-custom-properties]\n(‘CSS variables’) to override the default colour scheme. To do this, define\nvalues for any or all of the following named variables (the default colours are\nshown here):\n\n```css\n:root {\n  --flag-palette-black: #333333;\n  --flag-palette-blue: #0052b4;\n  --flag-palette-bright-red: #d80027;\n  --flag-palette-bright-white: #fcfcfc;\n  --flag-palette-brown: #85693d;\n  --flag-palette-dark-brown: #584528;\n  --flag-palette-dark-green: #496e2d;\n  --flag-palette-dark-grey: #818085;\n  --flag-palette-dark-pink: #751a46;\n  --flag-palette-dark-red: #a2001d;\n  --flag-palette-dark-yellow: #ffc635;\n  --flag-palette-gold: #ff9811;\n  --flag-palette-green: #6da544;\n  --flag-palette-light-blue: #338af3;\n  --flag-palette-light-grey: #f3f3f3;\n  --flag-palette-mid-grey-1: #dedde0;\n  --flag-palette-mid-grey-2: #bdbcc1;\n  --flag-palette-mid-grey-3: #acabb1;\n  --flag-palette-navy: #002266;\n  --flag-palette-pink: #f5a9b8;\n  --flag-palette-purple: #4a1f63;\n  --flag-palette-violet: #9c27b0;\n  --flag-palette-white: #eeeeee;\n  --flag-palette-yellow: #ffda44;\n}\n```\n\nNote that this only works when the flags are injected as SVG elements directly\ninto the same page as your custom CSS properties; if you are including flags as\nimages using an `\u003cimg\u003e` tag they will retain the default palette. If for any\nreason you need a version of these SVG files _without_ the CSS custom\nproperties, you can find the equivalent flags under `flags-original/`.\n\n## Contributing\n\nThe design files for this set of flags can be found on [Figma as part of the\nCircle Flags shared library][circle-flags-figma]. If you wish to make a\ncontribution, create a copy of that library and add your changes as a component,\nthen create a pull request including the exported SVG file and a link to your\ncopy of the Figma file, so that the original can be updated.\n\nYou should export two copies of your new/updated flag design: one to `flags/`,\nand one to `flags-original/`, then run the scripts to optimise the SVG assets,\nand update any explicit hexadecimal colour codes to their named CSS Custom\nProperty values (you should run `yarn svgo` last, to ensure the optimal SVG\noutput):\n\n```sh\n$ yarn\n$ yarn css-vars\n$ yarn svgo\n```\n\nThen commit the changes, and submit them as a pull request.\n\n### Running the documentation site locally\n\nIf for any reason you want to test running the github-pages site locally, you\ncan do so with:\n\n1. `bundle install`\n2. `bundle exec jekyll serve`\n\n## License\n\nThis project is released under the [MIT license](LICENSE.md).\n\n[circle-flags]: https://github.com/HatScripts/circle-flags\n[circle-flags-issues]: https://github.com/HatScripts/circle-flags/issues?q=is%3Aissue+is%3Aopen+square\n[iso-3166-1]: https://www.iso.org/obp/ui/#search/code/\n[gallery]: https://kapowaz.github.io/square-flags/gallery\n[react]: https://reactjs.org\n[svgo]: https://github.com/svg/svgo\n[figma]: https://www.figma.com/community/file/1295802738363022628/square-flags\n[css-custom-properties]: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_cascading_variables/Using_CSS_custom_properties\n[react-square-flags]: https://www.npmjs.com/package/react-square-flags\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkapowaz%2Fsquare-flags","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkapowaz%2Fsquare-flags","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkapowaz%2Fsquare-flags/lists"}