Weather icons

I've spent a little time getting some really nice weather icons to display in node-red dashboard which have mappings for wunderground, darksky, forecast, Yahoo, & other services.

The icons can be sized, flipped, rotated or changed colour.

I've modified the file paths from the original author to avoid conflicts with node-red, and also updated the to include a section specifically about installing in node-red. See for installation files


UPDATE 22/12/2016 If the icons are loaded externally via a ui_template (as the example flow below), then the wi icons can be loaded elsewhere, in the same manner as the Font Awsome icons. So for example to add a wi icon to a dashboard tab, add wi-wu-cloudy.
UPDATE 20/10/2017 Add the icon files to the dashboard app.cache to prevent repeated requests for authorization when using password protected dashboards.

[{"id":"adbb4573.ea9e58","type":"darksky in","z":"a444a9ff.e7a408","darksky":"","name":"","key":"","lon":"-1.054747","lat":"53.472963","date":"","time":"","lang":"en","units":"uk2","x":219,"y":1916,"wires":[["f4992b5a.09baa8"]]},{"id":"f4992b5a.09baa8","type":"function","z":"a444a9ff.e7a408","name":"Parse icon","func":"msg.payload = (;\n    node.status({text:msg.payload});\nreturn msg;","outputs":1,"noerr":0,"x":374,"y":1916,"wires":[["a61495d3.348f38"]]},{"id":"a61495d3.348f38","type":"ui_template","z":"a444a9ff.e7a408","group":"25555de.b146da2","name":"","order":0,"width":"3","height":"3","format":"<link rel=\"stylesheet\" href=\"/mycss/weather-icons.min.css\">\n<div style=\"display: flex;height: 100%;justify-content: center;align-items: center;\">\n<i class=\"fa-4x wi wi-forecast-io-{{msg.payload}}\"></i>\n</div>","storeOutMessages":true,"fwdInMessages":true,"x":536,"y":1916,"wires":[[]]},{"id":"25555de.b146da2","type":"ui_group","z":"","name":"Examples","tab":"6548f53a.48923c","order":1,"disp":true,"width":"12"},{"id":"6548f53a.48923c","type":"ui_tab","z":"6844b02f.2f6e5","name":"Test","icon":"school","order":4}]

Flow Info

created 1 year, 4 months ago
updated 5 months, 2 weeks ago

Node Types

  • function (x1)
  • darksky in (x1)
  • ui_group (x1)
  • ui_tab (x1)
  • ui_template (x1)


  • weather
  • icons
  • dashboard
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option