Collection of hand-picked free HTML and CSS weather icon code examples. Update of January 2019. 7 new items.

Related Articles

  1. CSS Icons
  2. CSS Dotted Menu Icons
  3. CSS Hamburger Menu Icons
  4. CSS Social Media Icons
  5. CSS Weather Widgets

Author

  • Mia

Links

Made with

  • HTML / CSS

About a code

Weather Icons

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

Responsive: no

Dependencies: -

Author

  • Weliton de Resende

Links

Made with

  • HTML / CSS (SCSS)

About a code

Animated Weather indicators

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

Responsive: no

Dependencies: -

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

Author

  • Wael Yasmina

Links

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

Author

  • ryuuseiistar

Links

Made with

  • HTML / CSS (SCSS)

About a code

CSS Weather Animations

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

Responsive: no

Dependencies: -

Author

  • olapli

Links

Made with

  • HTML / CSS (SCSS)

About a code

CSS Weather Animations

Some simple weather icons and animations made with HTML & CSS.

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

Responsive: no

Dependencies: -

Demo image: CSS Weather Icons

Author

  • Tiffany Du

Links

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

Links

Made with

  • HTML / CSS

About the code

Animated CSS Weather Icons

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

Dependencies: -

Author

  • Akhil Sai Ram

Links

Made with

  • HTML / CSS

About a code

Animated Weather Icons

Pure CSS animated weather icons.

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

Responsive: no

Dependencies: -

Demo image: Weather Icon Weather Icon - GIF Demo

Author

  • Nat

Links

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

Links

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

Links

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

Links

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

Links

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

Links

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

Links

Made with

  • HTML / CSS

About the code

Animated Weather Icons

Nice CSS3 animated weather icons.

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

Dependencies: -

Author

  • Tim Ruby

Links

Made with

  • HTML / CSS (SCSS)

About a code

CSS Weather Icon

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

Responsive: no

Dependencies: -

Author

  • David Featherston

Links

Made with

  • HTML (Haml) / CSS (SCSS) / JS

About a code

Animated Weather Icons

This is a little set of animated single element CSS weather icons.

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

Responsive: yes

Dependencies: jquery.js