Collection of free HTML and CSS weather icon code examples.

10 CSS Weather Icons

Collection of hand-picked free HTML and CSS weather icon code examples.

Related Articles

  1. CSS Weather Widgets

Demo image: Animated Weather Icons Animated Weather Icons - GIF Demo

Author

  • Wael Yasmina

Made with

  • HTML / CSS

About the code

Animated Weather Icons

Animated weather icons in HTML, SVG and CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: CSS Weather Icons

Author

  • Tiffany Du

Made with

  • HTML / CSS

About the code

CSS Weather Icons

A set of pure CSS weather icons created to work with the Wunderground weather API.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated CSS Weather Icons

Author

  • Jase

Made with

  • HTML / CSS

About the code

Animated CSS Weather Icons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Weather Icon Weather Icon - GIF Demo

Author

  • Nat

Made with

  • HTML / CSS (SCSS)

About the code

Weather Icons

Awesome weather icons in HTML, SVG and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Weather Icons Animated Weather Icons - GIF Demo

Author

  • Yemin Sajid

Made with

  • HTML / CSS (SCSS)

About the code

Animated Weather Icons

Weather icon animations using CSS animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Weather Icons Animated Weather Icons - GIF Demo

Author

  • Tuan Hoang

Made with

  • HTML / CSS (SCSS)

About the code

Animated Weather Icons

Animated weather icons in HTML, SVG and CSS.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Google Now - Weather Icons

Author

  • James Grima

Made with

  • HTML / CSS (SCSS)

About the code

Google Now - Weather Icons

Google Now weather icons CSS only, lots of pseudo-elements used, clip-path and transform properties with skew and rotate.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated SVG Weather Icons Animated SVG Weather Icons - GIF Demo

Author

  • James Thomson

Made with

  • HTML / CSS

About the code

Animated SVG Weather Icons

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Weather Icons Animated Weather Icons - GIF Demo

Author

  • Josh Bader

Made with

  • HTML / CSS

About the code

Animated Weather Icons

Simple animated weather icons in HTML and CSS.

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: -

Demo image: Animated Weather Icons Animated Weather Icons - GIF Demo

Author

  • Lennart Hase

Made with

  • HTML / CSS

About the code

Animated Weather Icons

Nice CSS3 animated weather icons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

back to top