Welcome to our collection of CSS weather icons! This is a hand-picked selection of free HTML and CSS icon code examples from various resources like CodePen, GitHub, and others. This collection has been updated as of February 2021, and we’re excited to share that it now includes 7 new items!

CSS weather icons are graphical representations of different weather conditions, such as sunny, cloudy, rainy, and more. They are created using Cascading Style Sheets (CSS), a style sheet language used for describing the look and formatting of a document written in HTML.

Using CSS for creating weather icons offers several advantages:

  • customizability: You can easily customize the size, color, and other properties of the icons to match your website’s design.
  • scalability: CSS icons scale without losing quality, making them ideal for responsive web design.
  • performance: As they are part of the code, they load faster than image-based icons.

Our collection features a variety of creative and visually appealing weather icons. Whether you’re looking for a minimalist design or something more intricate, you’re sure to find an icon that suits your needs. Each icon in our collection comes with its own HTML and CSS code example, making it easy for you to incorporate it into your project.

We hope you find this collection useful for your web development projects. Happy coding!

Related Articles

  1. CSS Icons
  2. 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