weather_icons_animated

Flutter package for the Meteocons weather icon set by Bas Milius, bundled for Flutter with SVG and Lottie support.

This package includes the upstream production assets from basmilius/weather-icons and exposes a small API for resolving or rendering icons in Flutter apps.

What is included

  • Filled animated SVG icons
  • Filled static SVG icons
  • Filled Lottie animations
  • Line animated SVG icons
  • Line static SVG icons
  • Line Lottie animations where available
  • Monochrome static SVG icons
  • Open-Meteo / WMO weather-code to icon mapping

Installation

dependencies:
  weather_icons_animated: ^0.0.1

Usage

import 'package:flutter/material.dart';
import 'package:weather_icons_animated/weather_icons_animated.dart';

class WeatherTile extends StatelessWidget {
  const WeatherTile({super.key});

  @override
  Widget build(BuildContext context) {
    return const WeatherIcon(
      icon: WeatherIcons.named('partly-cloudy-day'),
      style: WeatherIconStyle.line,
      format: WeatherIconFormat.svgAnimated,
      size: 72,
    );
  }
}

You can also resolve asset paths directly:

final asset = WeatherIcons.named('wind').resolve(
  style: WeatherIconStyle.line,
  format: WeatherIconFormat.lottie,
);

print(asset.path);
// assets/line/lottie/wind.json

Weather-code support

The package can also map Open-Meteo / WMO weather codes to icon slugs so your app can work directly from forecast API responses.

final icon = WeatherIcons.fromOpenMeteoCode(0, isDay: true);

const widget = WeatherIcon(
  icon: WeatherIcons.fromOpenMeteoCode(61),
  style: WeatherIconStyle.fill,
  format: WeatherIconFormat.svgAnimated,
  size: 64,
);

Supported mapping:

Weather code(s) Meaning Icon mapping
0 Clear sky clear-day or clear-night when isDay is provided
1, 2 Mainly clear / partly cloudy partly-cloudy-day or partly-cloudy-night when isDay is provided
3 Overcast overcast
45, 48 Fog / depositing rime fog fog-day, fog-night, or fog
51, 53, 55 Drizzle drizzle
56, 57, 66, 67 Freezing drizzle / freezing rain sleet
61, 63, 65, 80, 81, 82 Rain / rain showers rain
71, 73, 75, 77, 85, 86 Snow / snow grains / snow showers snow
95 Thunderstorm thunderstorms
96, 99 Thunderstorm with hail thunderstorms-extreme

If the exact asset combination is unavailable, resolution falls back by default:

  • line + lottie falls back to animated SVG when that icon has no line Lottie file
  • monochrome falls back to static SVG

Pass fallback: false to throw instead of falling back.

Asset layout

  • assets/fill/svg/
  • assets/fill/svg-static/
  • assets/fill/lottie/
  • assets/line/svg/
  • assets/line/svg-static/
  • assets/line/lottie/
  • assets/monochrome/svg-static/

Docs website

This repository also includes a publishable static docs site:

  • Page source: website/index.html
  • Generated dataset: website/data.js
  • GitHub Pages workflow: .github/workflows/deploy-docs.yml

The site is plain HTML with Tailwind via CDN, plus local package assets copied into the Pages artifact by the workflow. Once GitHub Pages is enabled for the repository, pushes to main that touch website/, assets/, or the workflow will deploy the docs site.

Icon availability table

Preview icons below are rendered from the upstream /fill/svg/ animated SVG files so the catalog stays visually browsable in Markdown.

  • Total icon slugs: 236
  • Full coverage in fill SVG, fill static SVG, fill Lottie, line SVG, line static SVG, and monochrome static SVG: 236
  • Line Lottie coverage: 73
Preview Icon Fill SVG Fill Static Fill Lottie Line SVG Line Static Line Lottie Monochrome Static
alert-avalanche-danger alert-avalanche-danger yes yes yes yes yes - yes
alert-falling-rocks alert-falling-rocks yes yes yes yes yes - yes
barometer barometer yes yes yes yes yes - yes
beanie beanie yes yes yes yes yes - yes
celsius celsius yes yes yes yes yes - yes
clear-day clear-day yes yes yes yes yes - yes
clear-night clear-night yes yes yes yes yes - yes
cloud-down cloud-down yes yes yes yes yes - yes
cloud-up cloud-up yes yes yes yes yes - yes
cloudy cloudy yes yes yes yes yes - yes
code-green code-green yes yes yes yes yes - yes
code-orange code-orange yes yes yes yes yes - yes
code-red code-red yes yes yes yes yes - yes
code-yellow code-yellow yes yes yes yes yes - yes
compass compass yes yes yes yes yes - yes
drizzle drizzle yes yes yes yes yes - yes
dust dust yes yes yes yes yes - yes
dust-day dust-day yes yes yes yes yes - yes
dust-night dust-night yes yes yes yes yes - yes
dust-wind dust-wind yes yes yes yes yes - yes
extreme extreme yes yes yes yes yes - yes
extreme-day extreme-day yes yes yes yes yes - yes
extreme-day-drizzle extreme-day-drizzle yes yes yes yes yes - yes
extreme-day-fog extreme-day-fog yes yes yes yes yes - yes
extreme-day-hail extreme-day-hail yes yes yes yes yes - yes
extreme-day-haze extreme-day-haze yes yes yes yes yes - yes
extreme-day-rain extreme-day-rain yes yes yes yes yes - yes
extreme-day-sleet extreme-day-sleet yes yes yes yes yes - yes
extreme-day-smoke extreme-day-smoke yes yes yes yes yes - yes
extreme-day-snow extreme-day-snow yes yes yes yes yes - yes
extreme-drizzle extreme-drizzle yes yes yes yes yes - yes
extreme-fog extreme-fog yes yes yes yes yes - yes
extreme-hail extreme-hail yes yes yes yes yes - yes
extreme-haze extreme-haze yes yes yes yes yes - yes
extreme-night extreme-night yes yes yes yes yes - yes
extreme-night-drizzle extreme-night-drizzle yes yes yes yes yes - yes
extreme-night-fog extreme-night-fog yes yes yes yes yes - yes
extreme-night-hail extreme-night-hail yes yes yes yes yes - yes
extreme-night-haze extreme-night-haze yes yes yes yes yes - yes
extreme-night-rain extreme-night-rain yes yes yes yes yes - yes
extreme-night-sleet extreme-night-sleet yes yes yes yes yes - yes
extreme-night-smoke extreme-night-smoke yes yes yes yes yes - yes
extreme-night-snow extreme-night-snow yes yes yes yes yes - yes
extreme-rain extreme-rain yes yes yes yes yes - yes
extreme-sleet extreme-sleet yes yes yes yes yes - yes
extreme-smoke extreme-smoke yes yes yes yes yes - yes
extreme-snow extreme-snow yes yes yes yes yes - yes
fahrenheit fahrenheit yes yes yes yes yes - yes
falling-stars falling-stars yes yes yes yes yes - yes
flag-gale-warning flag-gale-warning yes yes yes yes yes - yes
flag-hurricane-warning flag-hurricane-warning yes yes yes yes yes - yes
flag-small-craft-advisory flag-small-craft-advisory yes yes yes yes yes - yes
flag-storm-warning flag-storm-warning yes yes yes yes yes - yes
fog fog yes yes yes yes yes - yes
fog-day fog-day yes yes yes yes yes - yes
fog-night fog-night yes yes yes yes yes - yes
glove glove yes yes yes yes yes - yes
hail hail yes yes yes yes yes - yes
haze haze yes yes yes yes yes - yes
haze-day haze-day yes yes yes yes yes - yes
haze-night haze-night yes yes yes yes yes - yes
horizon horizon yes yes yes yes yes - yes
humidity humidity yes yes yes yes yes - yes
hurricane hurricane yes yes yes yes yes - yes
lightning-bolt lightning-bolt yes yes yes yes yes - yes
mist mist yes yes yes yes yes - yes
moon-first-quarter moon-first-quarter yes yes yes yes yes - yes
moon-full moon-full yes yes yes yes yes - yes
moon-last-quarter moon-last-quarter yes yes yes yes yes - yes
moon-new moon-new yes yes yes yes yes - yes
moon-waning-crescent moon-waning-crescent yes yes yes yes yes - yes
moon-waning-gibbous moon-waning-gibbous yes yes yes yes yes - yes
moon-waxing-crescent moon-waxing-crescent yes yes yes yes yes - yes
moon-waxing-gibbous moon-waxing-gibbous yes yes yes yes yes - yes
moonrise moonrise yes yes yes yes yes - yes
moonset moonset yes yes yes yes yes - yes
not-available not-available yes yes yes yes yes - yes
overcast overcast yes yes yes yes yes - yes
overcast-day overcast-day yes yes yes yes yes - yes
overcast-day-drizzle overcast-day-drizzle yes yes yes yes yes - yes
overcast-day-fog overcast-day-fog yes yes yes yes yes - yes
overcast-day-hail overcast-day-hail yes yes yes yes yes - yes
overcast-day-haze overcast-day-haze yes yes yes yes yes - yes
overcast-day-rain overcast-day-rain yes yes yes yes yes - yes
overcast-day-sleet overcast-day-sleet yes yes yes yes yes - yes
overcast-day-smoke overcast-day-smoke yes yes yes yes yes - yes
overcast-day-snow overcast-day-snow yes yes yes yes yes - yes
overcast-drizzle overcast-drizzle yes yes yes yes yes - yes
overcast-fog overcast-fog yes yes yes yes yes - yes
overcast-hail overcast-hail yes yes yes yes yes - yes
overcast-haze overcast-haze yes yes yes yes yes - yes
overcast-night overcast-night yes yes yes yes yes - yes
overcast-night-drizzle overcast-night-drizzle yes yes yes yes yes - yes
overcast-night-fog overcast-night-fog yes yes yes yes yes - yes
overcast-night-hail overcast-night-hail yes yes yes yes yes - yes
overcast-night-haze overcast-night-haze yes yes yes yes yes - yes
overcast-night-rain overcast-night-rain yes yes yes yes yes - yes
overcast-night-sleet overcast-night-sleet yes yes yes yes yes - yes
overcast-night-smoke overcast-night-smoke yes yes yes yes yes - yes
overcast-night-snow overcast-night-snow yes yes yes yes yes - yes
overcast-rain overcast-rain yes yes yes yes yes - yes
overcast-sleet overcast-sleet yes yes yes yes yes - yes
overcast-smoke overcast-smoke yes yes yes yes yes - yes
overcast-snow overcast-snow yes yes yes yes yes - yes
partly-cloudy-day partly-cloudy-day yes yes yes yes yes - yes
partly-cloudy-day-drizzle partly-cloudy-day-drizzle yes yes yes yes yes - yes
partly-cloudy-day-fog partly-cloudy-day-fog yes yes yes yes yes - yes
partly-cloudy-day-hail partly-cloudy-day-hail yes yes yes yes yes - yes
partly-cloudy-day-haze partly-cloudy-day-haze yes yes yes yes yes - yes
partly-cloudy-day-rain partly-cloudy-day-rain yes yes yes yes yes - yes
partly-cloudy-day-sleet partly-cloudy-day-sleet yes yes yes yes yes - yes
partly-cloudy-day-smoke partly-cloudy-day-smoke yes yes yes yes yes - yes
partly-cloudy-day-snow partly-cloudy-day-snow yes yes yes yes yes - yes
partly-cloudy-night partly-cloudy-night yes yes yes yes yes - yes
partly-cloudy-night-drizzle partly-cloudy-night-drizzle yes yes yes yes yes - yes
partly-cloudy-night-fog partly-cloudy-night-fog yes yes yes yes yes - yes
partly-cloudy-night-hail partly-cloudy-night-hail yes yes yes yes yes - yes
partly-cloudy-night-haze partly-cloudy-night-haze yes yes yes yes yes - yes
partly-cloudy-night-rain partly-cloudy-night-rain yes yes yes yes yes - yes
partly-cloudy-night-sleet partly-cloudy-night-sleet yes yes yes yes yes - yes
partly-cloudy-night-smoke partly-cloudy-night-smoke yes yes yes yes yes - yes
partly-cloudy-night-snow partly-cloudy-night-snow yes yes yes yes yes - yes
pollen pollen yes yes yes yes yes - yes
pollen-flower pollen-flower yes yes yes yes yes - yes
pollen-grass pollen-grass yes yes yes yes yes - yes
pollen-tree pollen-tree yes yes yes yes yes - yes
pressure-high pressure-high yes yes yes yes yes - yes
pressure-high-alt pressure-high-alt yes yes yes yes yes - yes
pressure-low pressure-low yes yes yes yes yes - yes
pressure-low-alt pressure-low-alt yes yes yes yes yes - yes
rain rain yes yes yes yes yes - yes
rainbow rainbow yes yes yes yes yes - yes
rainbow-clear rainbow-clear yes yes yes yes yes - yes
raindrop raindrop yes yes yes yes yes - yes
raindrop-measure raindrop-measure yes yes yes yes yes - yes
raindrops raindrops yes yes yes yes yes - yes
sleet sleet yes yes yes yes yes - yes
smoke smoke yes yes yes yes yes - yes
smoke-particles smoke-particles yes yes yes yes yes - yes
snow snow yes yes yes yes yes - yes
snowflake snowflake yes yes yes yes yes - yes
snowman snowman yes yes yes yes yes - yes
solar-eclipse solar-eclipse yes yes yes yes yes - yes
star star yes yes yes yes yes - yes
starry-night starry-night yes yes yes yes yes - yes
sun-hot sun-hot yes yes yes yes yes - yes
sunrise sunrise yes yes yes yes yes - yes
sunset sunset yes yes yes yes yes - yes
thermometer thermometer yes yes yes yes yes - yes
thermometer-celsius thermometer-celsius yes yes yes yes yes - yes
thermometer-colder thermometer-colder yes yes yes yes yes - yes
thermometer-fahrenheit thermometer-fahrenheit yes yes yes yes yes - yes
thermometer-glass thermometer-glass yes yes yes yes yes - yes
thermometer-glass-celsius thermometer-glass-celsius yes yes yes yes yes - yes
thermometer-glass-fahrenheit thermometer-glass-fahrenheit yes yes yes yes yes - yes
thermometer-mercury thermometer-mercury yes yes yes yes yes - yes
thermometer-mercury-cold thermometer-mercury-cold yes yes yes yes yes - yes
thermometer-moon thermometer-moon yes yes yes yes yes - yes
thermometer-raindrop thermometer-raindrop yes yes yes yes yes - yes
thermometer-snow thermometer-snow yes yes yes yes yes - yes
thermometer-sun thermometer-sun yes yes yes yes yes - yes
thermometer-warmer thermometer-warmer yes yes yes yes yes - yes
thermometer-water thermometer-water yes yes yes yes yes - yes
thunderstorms thunderstorms yes yes yes yes yes yes yes
thunderstorms-day thunderstorms-day yes yes yes yes yes yes yes
thunderstorms-day-extreme thunderstorms-day-extreme yes yes yes yes yes yes yes
thunderstorms-day-extreme-rain thunderstorms-day-extreme-rain yes yes yes yes yes yes yes
thunderstorms-day-extreme-snow thunderstorms-day-extreme-snow yes yes yes yes yes yes yes
thunderstorms-day-overcast thunderstorms-day-overcast yes yes yes yes yes yes yes
thunderstorms-day-overcast-rain thunderstorms-day-overcast-rain yes yes yes yes yes yes yes
thunderstorms-day-overcast-snow thunderstorms-day-overcast-snow yes yes yes yes yes yes yes
thunderstorms-day-rain thunderstorms-day-rain yes yes yes yes yes yes yes
thunderstorms-day-snow thunderstorms-day-snow yes yes yes yes yes yes yes
thunderstorms-extreme thunderstorms-extreme yes yes yes yes yes yes yes
thunderstorms-extreme-rain thunderstorms-extreme-rain yes yes yes yes yes yes yes
thunderstorms-extreme-snow thunderstorms-extreme-snow yes yes yes yes yes yes yes
thunderstorms-night thunderstorms-night yes yes yes yes yes yes yes
thunderstorms-night-extreme thunderstorms-night-extreme yes yes yes yes yes yes yes
thunderstorms-night-extreme-rain thunderstorms-night-extreme-rain yes yes yes yes yes yes yes
thunderstorms-night-extreme-snow thunderstorms-night-extreme-snow yes yes yes yes yes yes yes
thunderstorms-night-overcast thunderstorms-night-overcast yes yes yes yes yes yes yes
thunderstorms-night-overcast-rain thunderstorms-night-overcast-rain yes yes yes yes yes yes yes
thunderstorms-night-overcast-snow thunderstorms-night-overcast-snow yes yes yes yes yes yes yes
thunderstorms-night-rain thunderstorms-night-rain yes yes yes yes yes yes yes
thunderstorms-night-snow thunderstorms-night-snow yes yes yes yes yes yes yes
thunderstorms-overcast thunderstorms-overcast yes yes yes yes yes yes yes
thunderstorms-overcast-rain thunderstorms-overcast-rain yes yes yes yes yes yes yes
thunderstorms-overcast-snow thunderstorms-overcast-snow yes yes yes yes yes yes yes
thunderstorms-rain thunderstorms-rain yes yes yes yes yes yes yes
thunderstorms-snow thunderstorms-snow yes yes yes yes yes yes yes
tide-high tide-high yes yes yes yes yes yes yes
tide-low tide-low yes yes yes yes yes yes yes
time-afternoon time-afternoon yes yes yes yes yes yes yes
time-evening time-evening yes yes yes yes yes yes yes
time-late-afternoon time-late-afternoon yes yes yes yes yes yes yes
time-late-evening time-late-evening yes yes yes yes yes yes yes
time-late-morning time-late-morning yes yes yes yes yes yes yes
time-late-night time-late-night yes yes yes yes yes yes yes
time-morning time-morning yes yes yes yes yes yes yes
time-night time-night yes yes yes yes yes yes yes
tornado tornado yes yes yes yes yes yes yes
umbrella umbrella yes yes yes yes yes yes yes
umbrella-wind umbrella-wind yes yes yes yes yes yes yes
umbrella-wind-alt umbrella-wind-alt yes yes yes yes yes yes yes
uv-index uv-index yes yes yes yes yes yes yes
uv-index-1 uv-index-1 yes yes yes yes yes yes yes
uv-index-10 uv-index-10 yes yes yes yes yes yes yes
uv-index-11 uv-index-11 yes yes yes yes yes yes yes
uv-index-2 uv-index-2 yes yes yes yes yes yes yes
uv-index-3 uv-index-3 yes yes yes yes yes yes yes
uv-index-4 uv-index-4 yes yes yes yes yes yes yes
uv-index-5 uv-index-5 yes yes yes yes yes yes yes
uv-index-6 uv-index-6 yes yes yes yes yes yes yes
uv-index-7 uv-index-7 yes yes yes yes yes yes yes
uv-index-8 uv-index-8 yes yes yes yes yes yes yes
uv-index-9 uv-index-9 yes yes yes yes yes yes yes
wind wind yes yes yes yes yes yes yes
wind-alert wind-alert yes yes yes yes yes yes yes
wind-beaufort-0 wind-beaufort-0 yes yes yes yes yes yes yes
wind-beaufort-1 wind-beaufort-1 yes yes yes yes yes yes yes
wind-beaufort-10 wind-beaufort-10 yes yes yes yes yes yes yes
wind-beaufort-11 wind-beaufort-11 yes yes yes yes yes yes yes
wind-beaufort-12 wind-beaufort-12 yes yes yes yes yes yes yes
wind-beaufort-2 wind-beaufort-2 yes yes yes yes yes yes yes
wind-beaufort-3 wind-beaufort-3 yes yes yes yes yes yes yes
wind-beaufort-4 wind-beaufort-4 yes yes yes yes yes yes yes
wind-beaufort-5 wind-beaufort-5 yes yes yes yes yes yes yes
wind-beaufort-6 wind-beaufort-6 yes yes yes yes yes yes yes
wind-beaufort-7 wind-beaufort-7 yes yes yes yes yes yes yes
wind-beaufort-8 wind-beaufort-8 yes yes yes yes yes yes yes
wind-beaufort-9 wind-beaufort-9 yes yes yes yes yes yes yes
wind-offshore wind-offshore yes yes yes yes yes yes yes
wind-onshore wind-onshore yes yes yes yes yes yes yes
wind-snow wind-snow yes yes yes yes yes yes yes
windsock windsock yes yes yes yes yes yes yes
windsock-weak windsock-weak yes yes yes yes yes yes yes

Attribution

All bundled icons come from Bas Milius' Meteocons project and remain subject to the upstream MIT license. Keep the original license notice when redistributing this package or its assets.

Libraries

weather_icons_animated