You are probably looking for the

https://github.com/lipis/flag-icons SVG flag library.

<flag-icon>

This is an undated Polymer 0.5.5 Web Component

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

4:3 ratio SVG

Square ratio SVG

States and Provinces

United States

Australia

Brazil

Canada

Germany

Spain

Russia

NASCAR, IndyCar

Maritime and International Code of Signals

• Images come from famfamfam icon library, or generated from SVG.
• SVGs come from Wikimedia Commons.
• PNGs are compacted using pngcrush.
• ISO 3166-1 Country Code list is available on Wikipedia.

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

Aspect Ratios for Flags

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

Todo

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

History

For detailed changelog, check Releases.

License

MIT License © Steven Skelton