Overview

@pxlkit/weather is a themed icon pack for the Pxlkit ecosystem containing 36 icons (30 static + 6 animated) designed for weather conditions, seasons, temperature, and natural phenomena.

Installation

npm install @pxlkit/core @pxlkit/weather

@pxlkit/core is required as a dependency for rendering components.

Quick Start

import { PxlKitIcon, AnimatedPxlKitIcon } from '@pxlkit/core';
import { Sun, SpinningTornado } from '@pxlkit/weather';

// Static weather icon
<PxlKitIcon icon={Sun} size={32} colorful />

// Animated tornado
<AnimatedPxlKitIcon icon={SpinningTornado} size={48} colorful />

Icons

Static Icons (30)

| Icon | Name | Description | | --- | --- | --- | | ☀️ | Sun | Sunny / clear sky | | 🌙 | Moon | Night / moon | | ☁️ | Cloud | Cloudy | | ⛅ | CloudSun | Partly cloudy | | 🌧️ | Rain | Rainy | | ❄️ | Snow | Snowy | | ⛈️ | Thunder | Thunderstorm | | 💨 | Wind | Windy | | 🌡️ | Thermometer | Temperature gauge | | 💧 | Droplet | Water drop / humidity | | 🌪️ | Tornado | Tornado / cyclone | | 🌫️ | Fog | Foggy / misty | | 🌈 | Rainbow | Rainbow | | 🌅 | Sunrise | Sunrise / dawn | | 🌇 | Sunset | Sunset / dusk | | ☂️ | Umbrella | Umbrella / rain protection | | ❄️ | Snowflake | Snowflake crystal | | 🧊 | Hail | Hailstorm | | 🧭 | Compass | Wind direction / compass | | 🌃 | ClearNight | Clear night sky | | 🌥️ | CloudyNight | Cloudy night | | 🌧️ | RainNight | Rainy night | | 🌨️ | SnowNight | Snowy night | | 🔥 | HotTemp | Hot temperature | | 🥶 | ColdTemp | Cold temperature | | 🌑 | Eclipse | Solar/lunar eclipse | | 🌙 | CrescentMoon | Crescent moon phase | | 🌕 | FullMoon | Full moon | | 🌃 | StarryNight | Starry night sky | | 🌦️ | Drizzle | Light rain / drizzle |

Animated Icons (6)

| Icon | Name | Description | | --- | --- | --- | | 🌪️ | SpinningTornado | Spinning tornado vortex | | 🌫️ | DriftingFog | Drifting fog clouds | | ❄️ | FallingSnow | Falling snowflakes | | ⚡ | LightningStrike | Lightning bolt strike | | ☀️ | PulsingSun | Pulsing sun rays | | 💨 | WindGust | Wind gust effect |

Using the Icon Pack

import { PxlKitIcon, AnimatedPxlKitIcon, isAnimatedIcon } from '@pxlkit/core';
import { WeatherPack } from '@pxlkit/weather';

// Render all weather icons
{WeatherPack.icons.map((icon) =>
  isAnimatedIcon(icon) ? (
    <AnimatedPxlKitIcon key={icon.name} icon={icon} size={32} colorful />
  ) : (
    <PxlKitIcon key={icon.name} icon={icon} size={32} colorful />
  )
)}

Related Packages

| Package | Description | | --- | --- | | @pxlkit/core | Core rendering engine (required) | | @pxlkit/gamification | 51 icons — RPG, achievements, rewards | | @pxlkit/feedback | 33 icons — alerts, status, notifications | | @pxlkit/social | 43 icons — community, emojis, messaging | | @pxlkit/ui | 41 icons — interface controls, navigation | | @pxlkit/effects | 12 animated VFX icons | | @pxlkit/parallax | 10 multi-layer 3D parallax icons |

Documentation

Browse all icons and try the visual builder at pxlkit.xyz.

License

Pxlkit Asset License — free with attribution, with paid no-attribution terms in COMMERCIAL_TERMS.

Created by Joangel De La Rosa