Country flags pictures in single CSS sprite icon - Flag generator images
CSS Sprites- a method to optimize page loads by combining a large number of small country flag images into one. The method of extremely relevant with the active use of country flags - with all the flags on one page, then load it, the browser will need to make only two server requests instead of 247.
This service allows you to easily create CSS Sprites for any desired set of flags. Select the flags from the list and get the image in PNG format and the corresponding CSS code, ready to use on your website.
Country Flag sprites usage
Insert a transparent 1x1 pixel image and assign a class flag and flag-<country code>. The country code is in the format ISO 3166-1 alpha-2. For example, the flag of the Czech Republic:
<div class="flag flag-us"></div>Flags sprite image
CSS code
Other css flag sprite bundles
Other interesting CSS flag sprite sets for your website with ready to use examples.
country flag Bootstrap examples
Few examples using our css flag library with Bootstrap framework.
Bootstrap language selector
Bootstrap language dropdown with flags example in navbar using our flag css sprites library.
<nav class="navbar navbar-expand-lg navbar-light bg-light rounded">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample09">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="https://flag-sprites.com" id="dropdown09" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="flag flag-us"> </span> English</a>
<div class="dropdown-menu" aria-labelledby="dropdown09">
<a class="dropdown-item" href="#fr"><span class="flag flag-us"> </span> French</a>
<a class="dropdown-item" href="#it"><span class="flag flag-es"> </span> Italian</a>
<a class="dropdown-item" href="#ru"><span class="flag flag-fr"> </span> Russian</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-md-0">
<input class="form-control" type="text" placeholder="Search" aria-label="Search">
</form>
</div>
</nav>
Bootstrap vertical menu with country flags
Bootstrap menu list with flag icons, great css menu for travel website or just to select language.
<ul class="list-group">
<li class="list-group-item"><span class="flag flag-es"></span> <a href="#">Spain</a></li>
<li class="list-group-item"><span class="flag flag-fr"></span> <a href="#">France</a></li>
<li class="list-group-item"><span class="flag flag-us"></span> <a href="#">United States</a></li>
<li class="list-group-item"><span class="flag flag-ph"></span> <a href="#">Philippines</a></li>
<li class="list-group-item"><span class="flag flag-cz"></span> <a href="#">Czech Republic</a></li>
</ul>
Please, set a link to https://flag-sprites.com/ on the homepage where you use our content
SPONSORS If you want to be a sponsor, write a mail to themysticaweb@gmail.comLicense
FamFamFam flag icons are "available for free use for any purpose with no requirement for attribution"
Blogpotato.de flag icons are licensed under Creative Commons
Author and license terms for Maxmind icon set are unknown.
A link back to css-flags.com on the homepage where you use our content is appreciated.