<a href="https://bas.dev" target="_blank" rel="noopener">
	<img src="https://bas.dev/module/@bas/website/resource/image/logo.svg" alt="Bas Milius Logo" height="60" width="60" />
</a>

---

# Meteocons
Free to use animated SVG weather icons. Handcrafted by [Bas Milius](https://bas.dev).

## 👀 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.

---

<p float="left">
    <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"/>
</p>

<p float="left">
    <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"/>
</p>