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.

Slavko icons

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.com