flag-icons | Vaadin

A set of flags for use with iron-icon

[ This description is mirrored from README.md at github.com/Dabolus/flag-icons on 2019-05-22 ]


Published on webcomponents.org Travis build GitHub release

Demo and API docs

flag-icons is an iconset that allows you to easily display flags on you application/website.

It features 195 flat icons with rounded corners, that can be useful if you want to allow the user to change the language in you internationalized application.

Note: the credits for the original flags go to Muharrem Şenyıl.
I just ported them to SVG and then to an iconset.


bower install --save Dabolus/flag-icons


Using an iconset is extremely simple. These are the steps you need to follow:

  1. Load the iconset:
    <link rel="import" href="../bower_components/flag-icons/flag-icons.html">
  2. Insert your icon using iron-icon
    <iron-icon icon="flag:gb"></iron-icon>
  3. Done!

The flags can also be used inside a paper-icon-button.

Example with normal iron-icons:

<iron-icon icon="flag:af"></iron-icon>
<iron-icon icon="flag:al"></iron-icon>
<iron-icon icon="flag:dz"></iron-icon>

Example with paper-icon-buttons:

<paper-icon-button icon="flag:ad"></paper-icon-button>
<paper-icon-button icon="flag:ag"></paper-icon-button>
<paper-icon-button icon="flag:ar"></paper-icon-button>


Link to this version
ImportedReleased 08 August 2017MIT License
Framework Support
Polymer 2.0+
Browser Compatibility
Install with
bower install --save Dabolus/flag-icons"#2.0.0"
Run the above Bower command in your project folder. If you have any issues installing, please contact the author.
Release notes - Version 2.0.0


  • iron-icon#PolymerElements/iron-icon#^2.0.0
  • iron-iconset-svg#PolymerElements/iron-iconset-svg#^2.0.0
  • polymer#Polymer/polymer#^2.0.0