Weather Iconic

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

✨Features

• 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

[!NOTE] Originally made for the weather app temps.

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

🪄 Icons

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

[!TIP] Search for specific icons within the landing page: https://jackd248.github.io/weather-iconic/

[!NOTE] Icons are also available in single-color versions in the same packages.

🔥 Installation

npm install weather-iconic

⚡ Usage

Webfonts

<!-- 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>

[!TIP] See the CodePen example for more details.

SVG Sprites

<!-- 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>

🌈 Multi-Color Support

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.

[!TIP] Color Philosophy: The primary color (--weather-primary-fill) is used for highlight elements like lightning bolts, sun rays, or thermometer mercury. The secondary color (--weather-secondary-fill) serves as the base color for clouds, thermometer bodies, and single-element icons. This creates a natural visual hierarchy where important elements stand out.

CSS Multi-Color

<!-- 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) */
}

HTML Usage

<!-- 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>

Custom Utility Classes

/* 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; }

Dark Mode Support

/* 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;
}

[!NOTE] Multi-color support works with icons that have multiple paths or groups. Single-path icons will use the primary color for the entire icon.

🧑‍💻Development

Build Commands

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

Testing

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

Package Information

• 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

⭐ License

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