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


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

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

Links
Made with
- HTML / CSS
About the code
Animated CSS Weather Icons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


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


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


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

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


Links
Made with
- HTML / CSS
About the code
Animated SVG Weather Icons
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


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


Links
Made with
- HTML / CSS
About the code
Animated Weather Icons
Nice CSS3 animated weather icons.
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -