Animated and configurable weather icons made in React


Weather styled Icon

Animated and configurable weather icons made in React, using styled-components 💅 and CSS Animations.

Icons and styles were taken from this Codepen, please leave him a start 🌟


> yarn add styled-components weather-styled-icon

Usage example

import React from 'react';
import { Sunny, Cloudy, Rain, Snow } from 'weather-styled-icon';

const App = () => (
    <Sunny />
    <Cloudy />
    <Rain />
    <Snow />

For more examples and usage, please refer to the Docs page.


Given all the icons are using styled-components, theming is quite easy to do. You can import WeatherThemeProvider from the library, which comes with the default colors already set up, and by providing a new theme object you can override them. You can find the theme structure in this file.

import React from 'react';
import { WeatherThemeProvider, Sunny, Rain } from 'weather-styled-icons';

const myCustomTheme = {
  sunColor: 'Orange',
  raysColor: 'OrangeRed',

const App = () => (
  <WeatherThemeProvider theme={myCustomTheme}>
    <Sunny />
    <Rain />


  1. Fork this project:
  2. Create your feature branch: git checkout -b my-cool-feature
  3. Commit your changes: git commit -am 'feat: add my cool feature'
  4. Push the changes to your repository: git push origin my-cool-feature
  5. Create a new Pull Request:

Download Details:

Author: EmaSuriano


Source Code:

#reactjs #react #javascript

Animated and configurable weather icons made in React
31.80 GEEK