Weather Card

Weather Card with animated icons for Home Assistant Lovelace
Alternatives To Weather Card
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Titanic2,42516 years ago3March 22, 201710JavaScript
A set of animated icons + code to insert them into the webpages
7 years ago3JavaScript
Animated icons powered by the motion graphics library mo.js by Oleg Solomka. Inspiration comes from the Dribbble shot ["Like Animation"]( by Daryl Ginn.
Material Animated Switch1,136
4 years ago25Java
A material Switch with icon animations and color transitions
3 years ago1June 18, 20197apache-2.0Java
SmileyRating is a simple rating bar for android. It displays animated smileys as rating icon.
Bottom_navy_bar9322628 days ago20March 28, 202131apache-2.0Dart
A beautiful and animated bottom navigation
React Useanimations868967 months ago55December 22, 202120otherTypeScript
React-useanimations is a collection of free animated open source icons for React.js.
3 years ago63apache-2.0JavaScript
Android vector icon animation tool
292 years ago5July 29, 20204apache-2.0Java
Android's animated fingerprint icon provided in a simple, standalone library.
Hamburger React72818 months ago20April 05, 20223mitTypeScript
Animated hamburger menu icons for React (1.5 KB) 🍔
134 years ago4July 02, 20164mitObjective-C
Create custom animated splash views similar to the ones in the Twitter, Uber and Ping iOS app.
Alternatives To Weather Card
Select To Compare

Alternative Project Comparisons

Lovelace animated weather card

Originally created for the old UI converted by @arsaboo and @ciotlosm to Lovelace and now converted to Lit to make it even better.

This card uses the awesome animated SVG weather icons by amCharts.

Weather Card

Thanks for all picking this card up.


You have 2 options, hosted or self hosted (manual). The first option needs internet and will update itself.

If you are using Firefox:

Firefox < 66 does not support all the needed functions yet for the editor. You change this by enabling javascript.options.dynamicImport in about:config. Or use the version without the editor: Version without editor


Add the following to resources in your lovelace config:

- url:
  type: module


  1. Download the weather-card.js to /config/www/custom-lovelace/weather-card/. (or an other folder in /config/www/)
  2. Save, the amCharts icons (The contents of the folder "animated") under /config/www/custom-lovelace/weather-card/icons/ (or an other folder in /config/www/)
  3. If you use Lovelace in storage mode, and want to use the editor, download the weather-card-editor.js to /config/www/custom-lovelace/weather-card/. (or the folder you used above)

Add the following to resources in your lovelace config:

  - url: /local/custom-lovelace/weather-card/weather-card.js
    type: module


And add a card with type custom:weather-card:

type: custom:weather-card
entity: weather.yourweatherentity
name: Optional name

If you want to use your local icons add the location to the icons:

type: custom:weather-card
entity: weather.yourweatherentity
icons: "/local/custom-lovelace/weather-card/icons/"

You can choose wich elements of the weather card you want to show:

The 3 different rows, being:

  • The current weather icon, the current temperature and title
  • The details about the current weather
  • The X day forecast or hourly forecast
type: custom:weather-card
entity: weather.yourweatherentity
current: true
details: false
forecast: true
hourly_forecast: false
number_of_forecasts: 5

If you want to show the sunrise and sunset times, make sure the sun component is enabled:

# Example configuration.yaml entry

Dark Sky:

When using Dark Sky you should put the mode to daily if you want a daily forecast with highs and lows.

# Example configuration.yaml entry
  - platform: darksky
    api_key: YOUR_API_KEY
    mode: daily

OpenWeather Map:

When using OpenWeather map you can select hourly(default) or daily forecast to show.

# Example configuration.yaml entry
  - platform: openweathermap
    api_key: YOUR_API_KEY
Popular Icon Projects
Popular Animated Projects
Popular User Interface Components Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
Animated Icons