Flags

Flags based on CSS (UnoCSS) classes only.

Pure CSS flags:

Flag PL

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#79B8FF">FlagPL</span><span style="color:#E1E4E8"> /></span></span></code></pre>

Flag UA

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#E1E4E8"><</span><span style="color:#79B8FF">FlagUA</span><span style="color:#E1E4E8"> /></span></span></code></pre>

Circle icon flags with shadow

<pre class="astro-code github-dark" style="background-color:#24292e;color:#e1e4e8; overflow-x: auto;" tabindex="0" data-language="js"><code><span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#79B8FF">Icon</span><span style="color:#B392F0"> name</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"circle-flags:pl"</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"shadow-md rounded-full"</span><span style="color:#E1E4E8"> /></span></span> <span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#79B8FF">Icon</span><span style="color:#B392F0"> name</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"circle-flags:fi"</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"shadow-md rounded-full"</span><span style="color:#E1E4E8"> /></span></span> <span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#79B8FF">Icon</span><span style="color:#B392F0"> name</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"circle-flags:nl"</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"shadow-md rounded-full"</span><span style="color:#E1E4E8"> /></span></span> <span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#79B8FF">Icon</span><span style="color:#B392F0"> name</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"circle-flags:no"</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"shadow-md rounded-full"</span><span style="color:#E1E4E8"> /></span></span> <span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#79B8FF">Icon</span><span style="color:#B392F0"> name</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"circle-flags:ua"</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"shadow-md rounded-full"</span><span style="color:#E1E4E8"> /></span></span> <span class="line"><span style="color:#E1E4E8"> <</span><span style="color:#79B8FF">Icon</span><span style="color:#B392F0"> name</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"circle-flags:uk"</span><span style="color:#B392F0"> class</span><span style="color:#F97583">=</span><span style="color:#9ECBFF">"shadow-md rounded-full"</span><span style="color:#E1E4E8"> /></span></span></code></pre>

Props

FlagPL and FlagUA are static CSS components and take no props. Size them by wrapping in a sized container or pass utility classes via class.

For other flags, use the circle-flags icon collection via astro-icon — <Icon name="circle-flags:xx" /> where xx is the country code.