Many of the icons have a day and night version and animations effects.

  • Powerful and extremly easy to use.
  • Compact, only 12Kb.
  • Free of external libraries, plain JavaScript, no Jquery, Zepto or any other script library required.
  • Icons names are compatible with the yr.no Api.

How do I use it?

1. Add a reference to the WeatherIcons library:
<script src="WeatherIcon.min.js"></script>

2. Select a container for your icon on the HTML
<html>
<head>
<script src="WeatherIcon.min.js"></script>
<head>
<body>

<div id='icon'></ul>

</body>
</html>

3. Call the script to generate the icon.
var icon1 = WeatherIcon.add('icon1', WeatherIcon.SUN, { mode:WeatherIcon.NIGHT, stroke:true, shadow:true, animated:true } );

4. Other options:
icon1.play(); // play the animation
icon1.stop(); // stop the animation
icon1.toggle(); // pause/resume the animation
icon1.change( WeatherIcon.PARTLYCLOUD ); // change the icon

See it working

You can check the online demo here.



Downloads and source code:

Download demo files


GitHub repository