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

Related Articles

  1. CSS Weather Widgets

Author

  • Mia

Made with

  • HTML / CSS

About a code

Weather Icons

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

Responsive: no

Dependencies: -

Author

  • Weliton de Resende

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

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

Made with

  • HTML / CSS (SCSS)

About a code

CSS Weather Animations

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

Responsive: no

Dependencies: -

Author

  • olapli

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

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

Author

  • Akhil Sai Ram

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

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

Author

  • Tim Ruby

Made with

  • HTML / CSS (SCSS)

About a code

CSS Weather Icon

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

Responsive: no

Dependencies: -

Author

  • David Featherston

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