circle-flags

A collection of 400+ minimal circular SVG country, state and language flags

1,048

265

1,048

View on GitHub View on NPM

Top Related Projects

flag-icons

10,831

:flags: A curated collection of all country flags in SVG — plus the CSS for easier integration

country-flags

3,465

SVG and PNG renders of all countries' flags.

FlagKit

3,046

Beautiful flag icons for usage in apps and on the web.

Quick Overview

Circle Flags is a collection of circular country flags in SVG format. It provides over 300 flags, including those for countries, territories, and organizations, all designed in a consistent circular style.

Pros

High-quality SVG images that scale well for various use cases
Comprehensive collection covering most countries and territories
Consistent circular design for a unified look across all flags
Easy to use and integrate into web projects

Cons

Limited to circular design, which may not suit all design needs
Some lesser-known territories or organizations might be missing
No built-in support for dynamically changing flag colors or elements
Requires manual updates to keep up with any changes in national flags

Code Examples

<!-- Basic usage in HTML -->
<img src="https://hatscripts.github.io/circle-flags/flags/us.svg" width="48" alt="United States">

/* Using as a background image in CSS */
.flag-icon {
  background-image: url('https://hatscripts.github.io/circle-flags/flags/gb.svg');
  background-size: contain;
  background-repeat: no-repeat;
  width: 48px;
  height: 48px;
}

// Dynamically setting flag in JavaScript
const flagElement = document.getElementById('flag');
const countryCode = 'fr';
flagElement.src = `https://hatscripts.github.io/circle-flags/flags/${countryCode}.svg`;

Getting Started

To use Circle Flags in your project, you can either download the SVG files or use them directly from the GitHub Pages URL. Here's a quick example of how to include a flag in your HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Circle Flags Example</title>
</head>
<body>
    <h1>Circle Flags Demo</h1>
    <img src="https://hatscripts.github.io/circle-flags/flags/ca.svg" width="48" alt="Canada">
    <img src="https://hatscripts.github.io/circle-flags/flags/jp.svg" width="48" alt="Japan">
    <img src="https://hatscripts.github.io/circle-flags/flags/de.svg" width="48" alt="Germany">
</body>
</html>

This will display circular flags for Canada, Japan, and Germany. You can replace the country codes in the URLs to show different flags.

Competitor Comparisons

flag-icons

10,831

:flags: A curated collection of all country flags in SVG — plus the CSS for easier integration

Pros of flag-icons

Larger collection of flags (over 260 countries, including subdivisions and organizations)
Multiple formats available (SVG, PNG, CSS sprites)
More customization options (e.g., squared versions of flags)

Cons of flag-icons

Larger file size due to the extensive collection
May require more setup and configuration for specific use cases
Less focused on a single, consistent style (circular flags)

Code Comparison

circle-flags:

<img src="https://hatscripts.github.io/circle-flags/flags/us.svg" width="48">

flag-icons:

<span class="fi fi-us"></span>

Additional Notes

circle-flags focuses specifically on circular flag icons, providing a consistent and modern look. It's ideal for projects requiring a uniform, circular flag representation.

flag-icons offers a more comprehensive collection of flags in various formats, making it suitable for a wider range of applications. However, this versatility comes at the cost of a larger file size and potentially more complex implementation.

Both projects are actively maintained and offer easy integration into web projects. The choice between them depends on the specific requirements of your project, such as the need for circular flags versus a more extensive collection of flag representations.

country-flags

3,465

SVG and PNG renders of all countries' flags.

Pros of country-flags

Offers a wider variety of flag formats (PNG, SVG, JPG)
Includes more flags, including some non-country entities
Provides flags in multiple sizes for better flexibility

Cons of country-flags

Less consistent visual style across flags
Some flags may be outdated or less accurate
Lacks the modern, circular design aesthetic

Code Comparison

circle-flags uses a more streamlined approach for importing flags:

<img src="https://hatscripts.github.io/circle-flags/flags/us.svg" width="48">

country-flags requires specifying the full path and format:

<img src="https://raw.githubusercontent.com/hampusborgos/country-flags/main/png100px/us.png" width="48">

Both repositories provide easy-to-use flag images, but circle-flags offers a more consistent and modern circular design. country-flags, on the other hand, provides more variety in terms of formats and entities represented. The choice between the two depends on the specific needs of the project, such as design aesthetic, required formats, and the range of flags needed.

FlagKit

3,046

Beautiful flag icons for usage in apps and on the web.

Pros of FlagKit

Offers multiple file formats (PNG, SVG, PDF)
Includes both square and rectangular flag designs
Provides a more extensive collection of flags, including regional flags

Cons of FlagKit

Less frequently updated (last update was in 2021)
Larger file size due to multiple formats and higher resolution images
More complex integration process for developers

Code Comparison

FlagKit usage:

let flag = FlagKit.flag(for: "US")
imageView.image = flag

Circle Flags usage:

<img src="https://hatscripts.github.io/circle-flags/flags/us.svg" width="48">

Summary

FlagKit offers more versatility in terms of file formats and flag designs, but Circle Flags provides a simpler integration process and more frequent updates. Circle Flags focuses on circular flag designs, while FlagKit offers both square and rectangular options. Developers should consider their specific needs, such as required file formats, design preferences, and ease of implementation when choosing between these two flag icon libraries.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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

Userscripts

Google Translate: Filter & Flags - Filters languages and shows country flags on Google Translate
Wiktionary: Filter & Flags - Filters languages and shows country flags on Wiktionary

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:

#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.

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

Top Related Projects

Quick Overview

Pros

Cons

Code Examples

Getting Started

Competitor Comparisons

Pros of flag-icons

Cons of flag-icons

Code Comparison

Additional Notes

Pros of country-flags

Cons of country-flags

Code Comparison

Pros of FlagKit

Cons of FlagKit

Code Comparison

Summary

Convert designs to code with AI

README

circle-flags

Usage

React

NPM

Userscripts

Contributing

The color palette

License

Top Related Projects

Convert designs to code with AI

NPM DownloadsLast 30 Days