circle-flags circle-flags animated logo

A collection of circular SVG country flags, made by @HatScripts.

This is a re-hosted version of the original circle-flags project, enabling easy access to the flags via Cloudflare CDN instead of GitHub Pages.

The skk.moe and circle-flags.cdn.skk.moe domains are owned and operated by @SukkaW.

This service is provided for free with limited best effort, no SLA or warranty guaranteed. If you need a more reliable service, please consider self-hosting the original repository.

Usage

https://circle-flags.cdn.skk.moe/flags/xx.svg

(Where xx is the ISO 3166-1 alpha-2 code of a country).

For example, the following code:

<img src="https://circle-flags.cdn.skk.moe/flags/br.svg" width="48" />
<img src="https://circle-flags.cdn.skk.moe/flags/cn.svg" width="48" />
<img src="https://circle-flags.cdn.skk.moe/flags/gb.svg" width="48" />
<img src="https://circle-flags.cdn.skk.moe/flags/id.svg" width="48" />
<img src="https://circle-flags.cdn.skk.moe/flags/in.svg" width="48" />
<img src="https://circle-flags.cdn.skk.moe/flags/ng.svg" width="48" />
<img src="https://circle-flags.cdn.skk.moe/flags/ru.svg" width="48" />
<img src="https://circle-flags.cdn.skk.moe/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, and set cdnUrl prop to https://circle-flags.cdn.skk.moe/flags/.

Example:

import { CircleFlag } from 'react-circle-flags'

export const ArgentinianFlag = () => <CircleFlag countryCode="io" height="35" cdnUrl="https://circle-flags.cdn.skk.moe/flags/" />

React Native / Expo

If you’re using React Native / Expo, you may want to try the react-native-circle-flags package.

SolidJS

If you’re using SolidJS, you may want to try the solid-circle-flags package, and set cdn prop to https://circle-flags.cdn.skk.moe/flags/ (or https://circle-flags.cdn.skk.moe/flags/language/ if type is language).

Example:

import { CircleFlag, CircleFlagLanguage } from 'solid-circle-flags';

<CircleFlag countryCode="io" width={100} height={100} cdn="https://circle-flags.cdn.skk.moe/flags/"/>
<CircleFlagLanguage languageCode="io" width={100} height={100} cdn="https://circle-flags.cdn.skk.moe/flags/language/"/>

🚀 Contributing

Please contribute the original circle-flags repository directly, make sure to follow their guidelines.

This re-hosted version will sync changes from upstream on a daily basis.

🧾 License

The original circle-flags project is licensed under the MIT license.