A minimal multi-color weather icon set containing 100 icons offered in multiple integration options.

• 100 minimal weather icons
• Multi-color support for enhanced visual communication
• TypeScript support with auto-completion
• Tree-shaking for optimal bundle sizes
• Accessibility features (ARIA labels)
• Customizable props (size, color, className)
• SVG sprites for performance optimization
• Webfont generation (WOFF2, WOFF, TTF, EOT)
• PNG exports in multiple sizes (16px to 128px) with retina support

• Features
• Icons
• Installation
• Usage
  • Webfonts
  • SVG Sprites
• Multi-Color Support
  • CSS Multi-Color
• Development

All 100 weather icons with exemplary multi-color visual previews:

barometer	celsius	cloud-alt	cloud-down	cloud-fog	cloud-hail	cloud-haze
cloud-rain-alt	cloud-rain	cloud-sleet	cloud-smog	cloud-snow-alt	cloud-snow	cloud-up
cloud-wind	cloud	clouds-alt	clouds	compass-east	compass-north-east	compass-north-west
compass-north	compass-south-east	compass-south-west	compass-south	compass-west	date	earthquake
fahrenheit	fire	flood	fog	humidity	hurricane	info
lightning	moon-cloud-fog	moon-cloud-hail	moon-cloud-haze	moon-cloud-lightning	moon-cloud-rain-alt	moon-cloud-rain
moon-cloud-sleet	moon-cloud-snow-alt	moon-cloud-snow	moon-cloud-wind	moon-cloud	moon-first-quarter	moon-fog
moon-fullmoon	moon-last-quarter	moon-newmoon	moon-waning-crescent	moon-waning-gibbous	moon-waxing-crescent	moon-waxing-gibbous
moon	moonrise	moonset	na	pollen	rainbow	raindrop
refresh	sandstorm	shooting-star	snowflake	star	stars	sun-cloud-fog
sun-cloud-hail	sun-cloud-haze	sun-cloud-lightning	sun-cloud-rain-alt	sun-cloud-rain	sun-cloud-sleet	sun-cloud-snow-alt
sun-cloud-snow	sun-cloud-wind	sun-cloud	sun-eclipse	sun-fog	sun-high	sun-low
sun-medium	sun	sunrise	sunset	thermometer-cold	thermometer-freeze	thermometer-heat
thermometer-hot	thermometer-medium	time	tornado	umbrella	warning	wind-high
wind	windsock

npm install weather-iconic

<!-- Include the CSS -->
<link rel="stylesheet" href="node_modules/weather-iconic/dist/weather-iconic.css">

<!-- Use icons with proper classes -->
<i class="weather weather-sun"></i>
<i class="weather weather-cloud-rain weather-icon--lg"></i>

<!-- Use sprite icons directly -->
<svg width="32" height="32">
  <use xlink:href="/path/to/sprites.svg#weather-sun"></use>
</svg>
<svg width="32" height="32">
  <use xlink:href="/path/to/sprites.svg#weather-moon"></use>
</svg>

Weather Iconic supports multi-color icons for enhanced visual communication. Many weather icons contain multiple elements (e.g., thermometer mercury + body, sun + cloud) that can be styled with different colors.

<!-- Include enhanced CSS for multi-color support -->
<link rel="stylesheet" href="node_modules/weather-iconic/dist/weather-iconic-enhanced.css">

/* Basic multi-color usage with CSS custom properties */
.weather-multi-color {
  --weather-primary-fill: #80BBB2;   /* Highlight color (lightning, sun rays, mercury) */
  --weather-secondary-fill: #666666; /* Base color (clouds, bodies, single elements) */
}

<!-- Multi-color with CSS custom properties -->
<div class="weather-multi-color" style="--weather-primary-fill: #80BBB2; --weather-secondary-fill: #666666;">
  <svg><use xlink:href="/path/to/sprites.svg#weather-sun-cloud-lightning"></use></svg>
</div>

<!-- Multi-color with utility classes -->
<div class="weather-multi-color weather-primary-teal">
  <svg><use xlink:href="/path/to/sprites.svg#weather-sun-cloud-lightning"></use></svg>
</div>

/* Primary color utilities */
.weather-primary-red    { --weather-primary-fill: #dc3545; }
.weather-primary-blue   { --weather-primary-fill: #007bff; }
.weather-primary-green  { --weather-primary-fill: #28a745; }
.weather-primary-yellow { --weather-primary-fill: #ffc107; }

/* Secondary color utilities */
.weather-secondary-red    { --weather-secondary-fill: #dc3545; }
.weather-secondary-blue   { --weather-secondary-fill: #007bff; }
.weather-secondary-green  { --weather-secondary-fill: #28a745; }
.weather-secondary-yellow { --weather-secondary-fill: #ffc107; }

/* Automatic dark mode detection */
@media (prefers-color-scheme: dark) {
  .weather-multi-color {
    --weather-secondary-fill: #cccccc;
  }
}

/* Manual dark mode toggle */
[data-theme="dark"] .weather-multi-color {
  --weather-secondary-fill: #cccccc;
}

npm run build:icons      # Process and optimize SVGs
npm run build:components # Generate React/Vue components
npm run build:sprite     # Create SVG sprite
npm run build:fonts      # Generate webfonts (WOFF2, WOFF, TTF, EOT)
npm run build:png        # Export PNG images (multiple sizes + retina)
npm run build           # Full build pipeline

# open test page
cd tests
npm install
open index.html

• Bundle Sizes: SVG Sprite (~189KB), Webfonts (~100KB), JS Bundles (~14KB)
• Total Package: ~390KB (optimized distribution without PNG assets)
• Formats: SVG sprites, webfonts with TypeScript definitions, ES/CJS modules
• Font Formats: WOFF2, WOFF, TTF, EOT for maximum browser support
• Node.js: Requires Node.js >=16.0.0

This work is licensed under Creative Commons' Attribution-ShareAlike 3.0 United States (CC BY-SA 3.0)