/flag-icon

Polymer Web Component for SVG and PNG icons of country, state, province and other flags.

Primary LanguageHTMLMIT LicenseMIT

<flag-icon>

A collection of SVG flags, conveniently usable as a Polymer Web Component.

If you don't care about extra features, a simple CSS implementation of country flags can be found at https://github.com/lipis/flag-icon-css

Typical file sizes:

SVG files: 2kb to 75kb

PNG files: 16x11 < 1kb, 36x27 < 2kb, 75x56 < 5kb, 225x168 < 20kb

Countries

Tiny 16 x 11 PNG icons

Canada Korea Germany Australia France European Union Angola Belgium Austria Mozambique Norway Philippines Spain United Kingdom India Costa Rica South Africa Thailand Sri Lanka Sweden Slovenia Papua New Guinea Maldives United States Japan Ireland Bermuda Isle of Man Montenegro Norfolk Island Italy Brazil Iceland Puerto Rico Venezuela Saint Lucia Russian Federation Poland Netherlands China Vietnam Mexico Fiji Gabon Greece Grenada Iraq Israel Kenya Kiribati Latvia Liechtenstein Luxembourg Macedonia Malta Micronesia Martinique Mayotte Nigeria New Caledonia Oman Panama Peru Qatar Samoa Cabo Verde Syria Thailand Ukraine Bulgaria Burkina Faso United Nations

4:3 ratio SVG

Canada Korea Germany Australia France United States Norway Philippines Spain

Square ratio SVG

Canada Korea Germany Australia France United States Norway Philippines Spain

States and Provinces

United States

California Delaware Florida Illinois Maine Michigan Nevada North Carolina Texas

Australia

Australian Capital Territory New South Wales Northern Territory Queensland South Australia Tasmania Victoria Western Australia

Brazil

Rio de Janeiro Rio Grande do Norte Rio Grande do Sul Rondônia Roraima Santa Catarina São Paulo Sergipe tocantins

Canada

Alberta British Columbia Manitoba New Brunswick Newfoundland and Labrador Northwest Territories Nova Scotia Nunavut Québec'

Germany

Brandenburg Berlin Rhineland-Palatinate Saarland Hamburg Lower Saxony Saxony Schleswig-Holstein Thuringia

Spain

Andalucía Aragón Asturias Balearic Islands Basque Country Canary Islands Cantabria Castile and León La Rioja

Russia

Adygea Buryatia Chuvashia Ingushetia Tuva Kamchatka Stavropol Belgorod Novgorod

NASCAR, IndyCar

Green Yellow Black Yellow Saltire Yellow Slash Black White Per Bend Vertical Stripes Orange Circle Checkered

Maritime and International Code of Signals

Charlie Alpha Romeo November Oscar Victor Lima 1 3

Demos

Live Demo - General Use

Live Demo - Themes and Popover

Usage

  1. Add the library using the Javascript package manager Bower:

    bower install --save flag-icon

  2. Import Web Components' polyfill:

    <script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
  3. Import Custom Element:

    <link rel="import" href="bower_components/flag-icon/flag-icon.html">
  4. Start using it!

    <flag-icon key="ca"></flag-icon>
    <flag-icon key="canada"></flag-icon>
    <flag-icon key="124"></flag-icon>
    <!-- specify to use PNGs -->
    <flag-icon key="ca" img></flag-icon>
    <!-- specify a specific size -->
    <flag-icon key="ca" width="100"></flag-icon>
    
    <!-- Specify alt & title text,
         otherwise it defaults to the official country name -->
    <flag-icon key="can">Flag of Canada</flag-icon>
  5. Or use it unrendered in scripts:

    var f = new FlagIcon();
    
    //get country info
    f.findCountry('canada')
    //> { name: 'Canada', alpha2: 'CA', alpha3: 'CAN', numeric: 124 }
    
    //convert between 2 -> 3 letter character codes
    f.findCountry('ca').alpha3
    //> 'CAN'
    
    //get full names of states or provinces
    f.findUSState('ca')
    //> { name: 'California', iso: 'US-CA', alpha2: 'CA', numeric: 6, gpo: 'Calif.' }
    
    f.findCanadianProvince('ON')
    //> { name: 'Ontario', alpha2: 'ON' }

Options

Attribute Type Default Description
key string null Proper, common, ISO 3166-1 alpha-2, alpha-3, or country code
img attribute false Use PNGs instead of larger filesize SVG
width integer 16 Width of icon (aspect ratio maintained if height omitted).
height integer auto Height of icon (aspect ratio maintained if width omitted).
au boolean false Australia Australian State flags
br boolean false Brazil Brazilian State flags
ca boolean false Canada Canadian Province and Territory flags
de boolean false Germany German State flags
es boolean false Spain Spain Autonomous Community flags
ru boolean false Russia Russian Republics, Krais, and Oblast flags
us boolean false United States US State flags
maritime boolean false Maritime and ICS flags
racing boolean false NASCAR and IndyCar racing flags
square boolean false Use square version instead of 4:3 aspect (only valid for country flags)
aspect float Override aspect ratio used to render the flag

Aspect Ratios for Flags

Flags come in all different shapes and sizes, attempts were made to standardize to the following aspect ratios (width:height)

Attribute Aspect
Country 4:3
Austrialia 2:1
Brazil 3:2
Canada 2:1
Germany 5:3
Spain 3:2
US 3:2
Russia 3:2
NASCAR, IndyCar 4:3
Maritime 1:1

Todo

  • Loading notification, or default image.
  • Compact/minify SVG files

History

For detailed changelog, check Releases.

License

MIT License © Steven Skelton