repository·main·Indexed 23 days ago
https://github.com/basmilius/meteoconsA library of over 475 hand-crafted animated weather icons available in SVG and Lottie formats. It features four visual styles—Fill, Flat, Line, and Monochrome—and can be integrated via the `meteocons` convenience package, individual format packages (@meteocons/svg, @meteocons/lottie), or a dedicated CDN (cdn.meteocons.com). The library includes an icon manifest for programmatic access and supports categories such as Standard, Thermometer, Barometer, Wind, Moon, UV Index, and Alerts.
Every icon in the Meteocons library is available in four distinct visual styles:
To ensure production stability, it is recommended to pin your URLs to a specific version (e.g., 1.0.0) rather than using latest. Using latest may result in unexpected changes when a new version is released.
1.1.0-beta.1) are only available for 3 months after the subsequent full release, after which they are removed.When using lottie-web, choose a renderer based on your use case:
| Renderer | Pros | Cons |
|---|---|---|
canvas | Better performance, lower memory | No CSS styling of internals |
svg | CSS accessible, crisp at any zoom | Slower with many icons |
Recommendation: Use canvas when displaying many icons on one page. Use svg when you need to style animation elements with CSS.
Meteocons provides three distinct formats depending on your project requirements:
@meteocons/svg): Best for websites and web apps. Uses native <animate> elements (SMIL) for animations without a runtime. Very small file size (2–8 KB).@meteocons/svg-static): Best for emails and static documents where SMIL animations are not supported. Plain SVGs without animations. Very small file size (1–6 KB).@meteocons/lottie): Best for native apps (iOS, Android, React Native, Flutter) or when you need advanced playback control (speed, direction, segments). Requires a Lottie player runtime. Larger file size (5–20 KB).Every icon is available in four distinct styles:
currentColor. Ideal for adaptive UIs, dark mode, and theming.Note on Monochrome: To use currentColor inheritance, you must use inline SVG or CSS mask-image. Standard <img> tags render SVGs in an isolated context where currentColor does not apply.
Icons use kebab-case slugs following a specific pattern: {condition}[-{time}][-{variant}].{ext}.
condition: The weather condition (e.g., clear, rain, snow, wind).time: Optional day/night variant (e.g., day, night).variant: Optional modifier (e.g., rain, snow, sleet, fog).Example slugs:
clear-day (Clear sky, daytime)thunderstorms-day-rain (Thunderstorms with rain, daytime)thermometer-warmer (Thermometer showing warming trend)Meteocons icons are available in four distinct visual styles:
fillflatlinemonochromeMeteocons Lottie animations can be used on mobile platforms using standard Lottie libraries.
Use lottie-ios and initialize a LottieAnimationView with the icon name.
Use lottie-android. You can define it in XML using app:lottie_rawRes or programmatically using animationView.setAnimation("rain.json").
Install lottie-react-native and use the LottieView component, passing the JSON file via require().
import LottieView from 'lottie-react-native';
function WeatherIcon() {
return (
<LottieView
source={require('@meteocons/lottie/fill/rain.json')}
autoPlay
loop
style={{ width: 64, height: 64 }}
/>
);
}Weather icons convey critical information. Follow these patterns to ensure accessibility:
Provide alt text that describes the weather condition, not the icon itself.
alt="Rain expected"alt="rain icon"If the weather is already described in text nearby, hide the icon from screen readers using aria-hidden="true" and an empty alt="".
Respect users who prefer reduced motion by pausing animations. For Lottie, check window.matchMedia('(prefers-reduced-motion: reduce)') and set loop and autoplay to false, then use animation.goToAndStop(0, true) to show the first frame.
Lottie files use static RGBA values and do not support currentColor. To change colors at runtime, use one of these two methods:
When using the svg renderer, listen for the DOMLoaded event and manually update the fill or stroke attributes of the rendered elements.
Fetch the Lottie JSON, stringify it, and use replaceAll to swap the color array values (e.g., [0,0,0,1] for black) with your desired color before parsing it back to JSON and loading it via lottie-web.
// JSON pre-processing example
const response = await fetch('https://cdn.meteocons.com/latest/lottie/monochrome/rain.json');
const data = await response.json();
// Replace black [0,0,0,1] with a custom color
const json = JSON.stringify(data);
const colored = json.replaceAll(
'"c":{"a":0,"k":[0,0,0,1]}',
'"c":{"a":0,"k":[0.886,0.910,0.941,1]}' // #e2e8f0
);
lottie.loadAnimation({
container: el,
animationData: JSON.parse(colored),
renderer: 'svg',
loop: true,
autoplay: true
});To use Lottie icons on the web, you must install both @meteocons/lottie and a Lottie player like lottie-web.
Installation
npm install @meteocons/lottie lottie-webUsage
import lottie from 'lottie-web';
import clearDayAnimation from '@meteocons/lottie/fill/clear-day.json';
const animation = lottie.loadAnimation({
container: document.getElementById('weather-icon'),
animationData: clearDayAnimation,
renderer: 'svg', // or 'canvas' for better performance
loop: true,
autoplay: true
});
// Control playback
animation.setSpeed(0.5); // half speed
animation.pause();
animation.play();
animation.destroy(); // clean up when doneimport lottie from 'lottie-web';
import clearDayAnimation from '@meteocons/lottie/fill/clear-day.json';
const animation = lottie.loadAnimation({
container: document.getElementById('weather-icon'),
animationData: clearDayAnimation,
renderer: 'svg',
loop: true,
autoplay: true
});Install @meteocons/svg for static icons or @meteocons/lottie and lottie-web for animations. In Svelte, use the $effect rune (or lifecycle hooks) to dynamically import assets based on props.
npm install @meteocons/svg
# or for animations
npm install @meteocons/lottie lottie-web