I’ve been frustrated by the lack of mdi icons for my hue smart lights, so have sought a fix for adding custom svg iconsets. PNGs don’t do it for me, as I want them to be colorized based upon the bulb colour.
Approach
Standing heavily on the shoulders of those that have gone before (@thomasloven, @hulkhaugen) I’ve started creating 24x24px svg icons that can be held in javascript and added via a simple lovelace resource.
I’ve tended to draw icons ‘based upon’ the hue official icon set, with a view to allowing fair use and including some icons that are missing (no Ensis uplighter, for example), but should flag that these are for personal use only. I’ve favoured the icons that I use, but am open to adding others if people want them.
I’ll keep extending them with the icons that I need as my implementation grows, but for now, the icon set is as below:
Work out if I’m making them slightly too big in the frame or not. Looks odd when you have a lovelace view with an icon (eg: hue:upstairs, let me know your thoughts…)
The default MDI icons, and my BHA iconset follows Google’s Material Design guidelines. I’m not as strict as MDI, hence why I made my own pack. I personally think you icons look great, and being “allowed” to draw 3D models solves some challenges as the guidelines want the icons to be flat/2D. It’s a matter of taste and consistency.
Quite right. Mdi is pure and it’s right that we don’t taint it with our offerings. Having a resource icon kit gives us an easy way to improve the UX of home assistant, without compromising the design guidelines of larger icon sets.
Do you mind if I steal your HACS install routines? That’ll help get this out into the community for those that want it.
Thanks again for the reply. It’s quite the honour.
Edit: People quite rightly commented that the underscore naming convention (eg: hue:wall_spot) was not really in keeping with HA. I’ve renamed the glyphs to use dashes (per above) from v1.0.9 and up. Backwards compatibility is retained, so if you’ve used the underscore names, they’ll still work going forwards.
Custom icon list continues to grow. We now have quite a few wall lights (they’re fun to draw as the negative space becomes really key). Let me know if there are other fixtures you want.
Icon
Name
Icon
Name
hue:amaze
hue:lily-xl
hue:pendant-long-up
hue:wall-econic
hue:wall-flood
hue:wall-fuzo-h
hue:wall-fuzo
hue:wall-impress-narrow
hue:wall-nyro
hue:wall-turaco
I’ve submitted it to HACS so hopefully you’ll be able to find it in the store soon. Until then, manual and custom installs are still working.
I just got a feature request in for a new centris icon, showing that icon in use in the refreshed hue app.
Looks like the hue developer pack is out of date. I’ve looked through the current app resources and they’re using an icon font to specify the glyphs, with unicode mapping. There’s a bulb shape I’ve not seen before (golfball?) and new icons for the centris and amarant. I’ve added both of the latter as custom icons, by recreating the glyphs in illustrator.
Along with the icon requests for other fixtures, that brings the custom list to the following 18.
Been really pleased with the feedback and engagement from the community in driving this library forwards. There are now some 70 custom icons being driven by requests, and the list seems to grow each day.
In addition to the hue standard icons from the app, hass-hue-icons includes 74 custom icons designed by the author for specific hue fixtures and bulb combinations that aren’t represented by the ‘official’ icon set.
Just wanted to thank the community for their involvement and suggestions in this icon pack. We now have 100 custom icons for hue devices and groups, all created in response to icon requests via the github template or via PM from forums, reddit, facebook, etc.
I’ve definitely got better at creating icons, so its been a good learning experience for me and good to give something back to the folks here.
If the Hue appliance / group you want isn’t here, let me know and i’ll create it.
Custom Icon List (in addition to the 69 from the app).
Great work How ever after a power failure at home it stoped working Ive checked so that confirms is correct I’ve flushed the DNS any ideas what it can be?
Everything the plugin needs to render the icons is in the javascript file, so DNS shouldn’t be an issue. Its all local.
If you’re on a desktop PC, easiest way to see if its installed is to open up the developer/javascript console of your browser and see if it spits out a version number for the script, eg:
If you installed via HACS, it would be interesting to know whether other HACS repos are still working for you. Also, whether you added the extra_module_url to your configuration.yaml, eg:
Lastly, I can only really suggest uninstalling, then putting it back, or rolling back to an older version then re-updating to current. Although there’s a lot of effort in creating the icons, the script that applies them is pretty simplistic, and that script is the only resource that’s required.
So… this repo has really got a life of its own. We have almost 120 custom icons created now, almost all in response to icon requests and suggestions from the community. Thanks all for making it so broad. I’ve learned a lot and got so much better at creating icons!
@Andy_Allsopp I am searching a way to get in contact but didn’t find any other way than this.
we are providing a service where we print icons on physical wall switches like the Aqara mini switch. we have had several customers asking if we can add your Hue icons to our
library’s of icons. but I am afraid to violate the NC license as we are charging for the printing service.
as said we are charging for the actual printing but not the icons. our icon library now is build on Material icon database and a log of icons shared but others both individuals and communities.
Hope you see may message and if needed you can reach me here: [email protected]
Hi guys. First off, thanks for all of this, the icons are so nice! Im rather new to HA, have got a bunch set up and am now trying to integrate this into my current setup. Im wondering if there is a way to enable ‘hold actions’ on these? To open and change the colors of the individual lights using the custom card.
Hmmm… Not entirely sure what you mean by ‘the custom card’. The hass-hue-icons library just swaps out the icons that are mapped to your entities, and doesn’t intend to change the underlying functionality of home assistant.
If you click the icon or entity name, you should get the picker you’re talking about. Clearly something amiss. Here’s a video of my dash in use:
Thank you Colin. I do this for free to give back to the community, so its great to hear you’re enjoying them. Don’t forget to raise an feature request if there’s a hue icon you’re missing. Seems there are new lamps coming out in various territories every few days
