Meteocons

Free to use animated SVG weather icons. Handcrafted by Bas Milius.

👀 Preview

• Filled icons: https://basmilius.github.io/weather-icons/index-fill.html
• Outlined icons: https://basmilius.github.io/weather-icons/index.html

⚒ Process

• An icon is designed in Adobe Illustrator.
• Icons are exported to plain SVG files.
• Animations are added by editing SVG files.
• A node.js script minifies the SVG's.

🎨 Design files

This repository not only contains the production-ready files, but also the original design files. You may use these files to adjust icons or even create new ones. The design files are Adobe Illustrator .ai-files.

🌥 Missing an icon?

Please let me know by creating an issue. Keep in mind that I only accept icons that are somewhat weather related.

<img src="https://bmcdn.nl/assets/weather-icons/v2.0/fill/clear-day.svg" alt="Partly Cloudy Day" height="48"/>
<img src="https://bmcdn.nl/assets/weather-icons/v2.0/fill/partly-cloudy-day.svg" alt="Partly Cloudy Day" height="48"/>
<img src="https://bmcdn.nl/assets/weather-icons/v2.0/fill/rain.svg" alt="Rain" height="48"/>
<img src="https://bmcdn.nl/assets/weather-icons/v2.0/fill/tornado.svg" alt="Tornado" height="48"/>
<img src="https://bmcdn.nl/assets/weather-icons/v2.0/fill/clear-night.svg" alt="Clear Night" height="48"/>







<img src="https://bmcdn.nl/assets/weather-icons/v2.0/line/clear-day.svg" alt="Partly Cloudy Day" height="48"/>
<img src="https://bmcdn.nl/assets/weather-icons/v2.0/line/partly-cloudy-day.svg" alt="Partly Cloudy Day" height="48"/>
<img src="https://bmcdn.nl/assets/weather-icons/v2.0/line/rain.svg" alt="Rain" height="48"/>
<img src="https://bmcdn.nl/assets/weather-icons/v2.0/line/tornado.svg" alt="Tornado" height="48"/>
<img src="https://bmcdn.nl/assets/weather-icons/v2.0/line/clear-night.svg" alt="Clear Night" height="48"/>