Flags

Flags of many country on Earth

• Comprehensible packing
• Easy to use
• To work with modern or old browser

caveats:

• May not natively work with <select>
• Quite large if not lossless compressed (160kb raw | 31kb brotli)

preview:

Quick Start (CDN)

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hUwUtao/flags/generated/flags.css" />
<!-- or: -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/hUwUtao/flags/generated/flags-inline.css" />

Use it:

<span class="flg vn"></span>
<span class="flg us"></span>
<span class="flg jp"></span>

Size / Crop

:root { --s: 1; }  /* scale (24px base) */
:root { --ci: 1; } /* circle inset (px) */

Examples:

.f16 { --s: .6667; } /* 16px */
.f8 { --s: .3333; }  /* 8px */

SVG Fragment ()

<img src="https://cdn.jsdelivr.net/gh/hUwUtao/flags/generated/flags-atlas.svg#flag-vn" alt="Vietnam flag" />

JSX / TSX (Local Assets)

Copy into your app:

• generated/flags-inline.css (single file), or
• generated/flags.css + generated/flags-atlas.svg

Import once in your entry:

import "./assets/flags/flags.css";
// or: import "./assets/flags/flags-inline.css";

Use anywhere:

export function DemoFlags() {
  return (
    <div style={{ display: "flex", gap: 8, alignItems: "center" }}>
      <span className="flg vn"></span>
      <span className="flg us"></span>
      <span className="flg jp" style={{ ["--s" as any]: 0.6667 }}></span>
    </div>
  );
}