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

Category: CSS & CSS3 , Image | September 10, 2023
Views Total:149 views
Official Page:Go to website
Last Update:September 10, 2023


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


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>



  • Added more flags.


  • Added Barbados and Morocco.


  • Updated presentation, introduction, and sources.


  • Added Israel and Albania.

You Might Be Interested In:

Leave a Reply