Display Country/LGBTQ+/Pride Flags With Only HTML – Flag.css

Preview:

Description:

pure-css-flags is a CSS library for generating scalable country, LGBTQ+, Pride flags using only HTML and CSS.

It provides an easy way to add flags to your website or app without custom images. It uses CSS to draw the flag designs within a simple <div> container. This allows the flags to scale smoothly to any size while keeping clean lines and proportions. The flags will load fast without extra HTTP requests by relying purely on HTML and CSS.

🔔 Note: More flags will be added in future updates as this library is still in development.

How to use it:

1. Download and import the flags.min.css stylesheet into your project.

<link rel="stylesheet" href="css/flags.min.css" />

2. Visit the official pure-css-flags website to get a full list of available flags and their corresponding HTML structures. For instance, to display the Ukraine flag, use:

<div class="flag">
  <div class="flag-container">
    <div id="flag-ua"></div>
  </div>
</div>

Changelog:

09/10/2023

• Added more flags.

09/07/2023

• Added Barbados and Morocco.

09/05/2023

• Updated presentation, introduction, and sources.

09/02/2023

• Added Israel and Albania.