Created custom colorizable hue icons as a lovelace resource

Tags: #<Tag:0x00007fc3f15be3b8> #<Tag:0x00007fc3f15be2c8> #<Tag:0x00007fc3f15be1d8>

Background

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:

I’ll also try to make it HACS installable. Instructions for a manual install are on the github here.

Todo (edited 12 July 2021):

  • Make it HACS installable (it is, search for hass-hue-icons or add github.com/arallsopp/hass-hue-icons) as a custom repo
  • Create more icons
  • 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…)
3 Likes

Here’s how they look in situ presently

Coming along, I feel. :slight_smile:

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.

1 Like

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.

No, not at all, be my guest :smiley:

1 Like

Thanks again to @hulkhaugen. This frontend extension is now hacs installable.

I’ve just pushed a new release (v.1.0.5) which brings the total number of icons to 69.

Table of glyphs given below. or on the github

Icon Name
hue:bloom hue:bloom
hue:bollard hue:bollard
hue:bulb-candle hue:bulb-candle
hue:bulb-classic hue:bulb-classic
hue:bulb-flood hue:bulb-flood
hue:bulb-spot hue:bulb-spot
hue:bulb-sultan hue:bulb-sultan
hue:ceiling-round hue:ceiling-round
hue:ceiling-square hue:ceiling-square
hue:desk-lamp hue:desk-lamp
hue:dimmer-switch hue:dimmer-switch
hue:double-spot hue:double-spot
hue:downstairs hue:downstairs
hue:floor-lantern hue:floor-lantern
hue:floor-shade hue:floor-shade
hue:floor-spot hue:floor-spot
hue:go hue:go
hue:iris hue:iris
hue:lightstrip hue:lightstrip
hue:motion-sensor hue:motion-sensor
hue:outdoor-motion-sensor hue:outdoor-motion-sensor
hue:pendant-long hue:pendant-long
hue:pendant-round hue:pendant-round
hue:play-bar hue:play-bar
hue:recessed-ceiling hue:recessed-ceiling
hue:recessed-floor hue:recessed-floor
hue:room-attic hue:room-attic
hue:room-balcony hue:room-balcony
hue:room-bathroom hue:room-bathroom
hue:room-bbq hue:room-bbq
hue:room-bedroom hue:room-bedroom
hue:room-carport hue:room-carport
hue:room-closet hue:room-closet
hue:room-computer hue:room-computer
hue:room-dining hue:room-dining
hue:room-driveway hue:room-driveway
hue:room-front-door hue:room-front-door
hue:room-games hue:room-games
hue:room-garage hue:room-garage
hue:room-guestroom hue:room-guestroom
hue:room-gym hue:room-gym
hue:room-hallway hue:room-hallway
hue:room-kids hue:room-kids
hue:room-kitchen hue:room-kitchen
hue:room-laundry hue:room-laundry
hue:room-living hue:room-living
hue:room-lounge hue:room-lounge
hue:room-nursery hue:room-nursery
hue:room-office hue:room-office
hue:room-other hue:room-other
hue:room-outdoors hue:room-outdoors
hue:room-pool hue:room-pool
hue:room-porch hue:room-porch
hue:room-recreation hue:room-recreation
hue:room-stairs hue:room-stairs
hue:room-storage hue:room-storage
hue:room-studio hue:room-studio
hue:room-terrace hue:room-terrace
hue:room-toilet hue:room-toilet
hue:single-spot hue:single-spot
hue:table-shade hue:table-shade
hue:table-wash hue:table-wash
hue:upstairs hue:upstairs
hue:wall-lantern hue:wall-lantern
hue:wall-shade hue:wall-shade
hue:wall-spot hue:wall-spot

A few more custom icons added:

Icon Name
hue:amaze hue:amaze
hue:lily-xl hue:lily-xl
hue:pendant-long-up hue:pendant-long-up
hue:wall-flood hue:wall-flood
hue:wall-fuzo hue:wall-fuzo
hue:wall-nyro hue:wall-nyro
hue:wall-turaco hue:wall-turaco

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:amaze hue:lily-xl hue:lily-xl
hue:pendant-long-up hue:pendant-long-up hue:wall-econic hue:wall-econic
hue:wall-flood hue:wall-flood hue:wall-fuzo-h hue:wall-fuzo-h
hue:wall-fuzo hue:wall-fuzo hue:wall-impress-narrow hue:wall-impress-narrow
hue:wall-nyro hue:wall-nyro hue:wall-turaco 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.

Icon Name Icon Name
hue:amarant hue:amarant hue:amaze hue:amaze
hue:bulb-filament-alt hue:bulb-filament-alt hue:centris hue:centris
hue:lily-xl hue:lily-xl hue:pendant-long-up hue:pendant-long-up
hue:pillar-nyro hue:pillar-nyro hue:wall-appear hue:wall-appear
hue:wall-econic-lantern hue:wall-econic-lantern hue:wall-econic hue:wall-econic
hue:wall-flood hue:wall-flood hue:wall-fuzo-h hue:wall-fuzo-h
hue:wall-fuzo hue:wall-fuzo hue:wall-impress-narrow hue:wall-impress-narrow
hue:wall-impress hue:wall-impress hue:wall-lucca hue:wall-lucca
hue:wall-nyro hue:wall-nyro hue:wall-turaco hue:wall-turaco

can you add such icons as air conditioner, TV?

hmmm… they’re not really part of the hue ecosystem so don’t really belong here.

A more generic set of icons, such as mdi (already supported in Home Assistant) will likely get you closer. I’d use:

mdi:television-classic
And
mdi:air-conditioner

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.

Icon Name Icon Name
hue:adore-alt hue:adore-alt hue:adore hue:adore
hue:amarant hue:amarant hue:amaze hue:amaze
hue:beyond-down hue:beyond-down hue:beyond-solid hue:beyond-solid
hue:beyond-up hue:beyond-up hue:beyond hue:beyond
hue:bulb-filament-alt hue:bulb-filament-alt hue:bulb-group-candle hue:bulb-group-candle
hue:bulb-group-filament-alt hue:bulb-group-filament-alt hue:bulb-group-filament-candle hue:bulb-group-filament-candle
hue:bulb-group-filament-filament-alt hue:bulb-group-filament-filament-alt hue:bulb-group-filament-spot hue:bulb-group-filament-spot
hue:bulb-group-filament-sultan hue:bulb-group-filament-sultan hue:bulb-group-filament hue:bulb-group-filament
hue:bulb-group-lightstrip-v hue:bulb-group-lightstrip-v hue:bulb-group-lightstrip hue:bulb-group-lightstrip
hue:bulb-group-spot hue:bulb-group-spot hue:bulb-group-sultan-lightstrip-off hue:bulb-group-sultan-lightstrip-off
hue:bulb-group-sultan-lightstrip hue:bulb-group-sultan-lightstrip hue:button hue:button
hue:ceiling-explore hue:ceiling-explore hue:ceiling-fair hue:ceiling-fair
hue:ceiling-rect hue:ceiling-rect hue:ceiling-still hue:ceiling-still
hue:centris-three hue:centris-three hue:centris-two hue:centris-two
hue:centris hue:centris hue:centura-round hue:centura-round
hue:centura hue:centura hue:daylo-wall hue:daylo-wall
hue:gradient-lightstrip-wrap hue:gradient-lightstrip-wrap hue:gradient-lightstrip hue:gradient-lightstrip
hue:liane hue:liane hue:lightstrip-tv-alt hue:lightstrip-tv-alt
hue:lightstrip-tv hue:lightstrip-tv hue:lightstrip-wrap hue:lightstrip-wrap
hue:lily-xl hue:lily-xl hue:pedestal-econic hue:pedestal-econic
hue:pendant-long-up hue:pendant-long-up hue:pillar-nyro hue:pillar-nyro
hue:pillar-spot-double hue:pillar-spot-double hue:pillar-spot hue:pillar-spot
hue:pillar-tuar hue:pillar-tuar hue:plug-eu hue:plug-eu
hue:plug-uk hue:plug-uk hue:sana hue:sana
hue:signe hue:signe hue:socket-eu hue:socket-eu
hue:socket-uk hue:socket-uk hue:socket-us hue:socket-us
hue:sync-box-alt hue:sync-box-alt hue:sync-box hue:sync-box
hue:tap hue:tap hue:wall-appear hue:wall-appear
hue:wall-attract hue:wall-attract hue:wall-econic-lantern-base hue:wall-econic-lantern-base
hue:wall-econic-lantern-top hue:wall-econic-lantern-top hue:wall-econic-lantern hue:wall-econic-lantern
hue:wall-econic hue:wall-econic hue:wall-flood hue:wall-flood
hue:wall-fuzo-h hue:wall-fuzo-h hue:wall-fuzo hue:wall-fuzo
hue:wall-impress-narrow hue:wall-impress-narrow hue:wall-impress hue:wall-impress
hue:wall-lucca hue:wall-lucca hue:wall-nyro hue:wall-nyro
hue:wall-resonate hue:wall-resonate hue:wall-tuar hue:wall-tuar
hue:wall-turaco hue:wall-turaco hue:wellner-solid hue:wellner-solid
hue:wellner hue:wellner hue:wellness hue:wellness
2 Likes

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).

Icon Name Icon Name
hue:adore-alt hue:adore-alt hue:adore hue:adore
hue:amarant hue:amarant hue:amaze hue:amaze
hue:beyond-down hue:beyond-down hue:beyond-solid hue:beyond-solid
hue:beyond-up hue:beyond-up hue:beyond hue:beyond
hue:bulb-filament-alt hue:bulb-filament-alt hue:bulb-filament-candle hue:bulb-filament-candle
hue:bulb-group-candle hue:bulb-group-candle hue:bulb-group-ceiling-round hue:bulb-group-ceiling-round
hue:bulb-group-ceiling-square hue:bulb-group-ceiling-square hue:bulb-group-centura-round hue:bulb-group-centura-round
hue:bulb-group-centura hue:bulb-group-centura hue:bulb-group-filament-alt hue:bulb-group-filament-alt
hue:bulb-group-filament-candle hue:bulb-group-filament-candle hue:bulb-group-filament-filament-alt hue:bulb-group-filament-filament-alt
hue:bulb-group-filament-spot hue:bulb-group-filament-spot hue:bulb-group-filament-sultan hue:bulb-group-filament-sultan
hue:bulb-group-filament hue:bulb-group-filament hue:bulb-group-lightstrip-v hue:bulb-group-lightstrip-v
hue:bulb-group-lightstrip hue:bulb-group-lightstrip hue:bulb-group-spot hue:bulb-group-spot
hue:bulb-group-sultan-lightstrip-off hue:bulb-group-sultan-lightstrip-off hue:bulb-group-sultan-lightstrip hue:bulb-group-sultan-lightstrip
hue:button hue:button hue:ceiling-buratto-four hue:ceiling-buratto-four
hue:ceiling-buratto-three hue:ceiling-buratto-three hue:ceiling-buratto-two hue:ceiling-buratto-two
hue:ceiling-buratto hue:ceiling-buratto hue:ceiling-explore hue:ceiling-explore
hue:ceiling-fair hue:ceiling-fair hue:ceiling-fugato-four-alt hue:ceiling-fugato-four-alt
hue:ceiling-fugato-four hue:ceiling-fugato-four hue:ceiling-fugato-three-alt hue:ceiling-fugato-three-alt
hue:ceiling-fugato-three hue:ceiling-fugato-three hue:ceiling-fugato-two-alt hue:ceiling-fugato-two-alt
hue:ceiling-fugato-two hue:ceiling-fugato-two hue:ceiling-rect hue:ceiling-rect
hue:ceiling-still hue:ceiling-still hue:centris-three hue:centris-three
hue:centris-two hue:centris-two hue:centris hue:centris
hue:centura-round hue:centura-round hue:centura-two hue:centura-two
hue:centura hue:centura hue:daylo-wall hue:daylo-wall
hue:ensis-up hue:ensis-up hue:ensis hue:ensis
hue:friends-of-hue-arke-round hue:friends-of-hue-arke-round hue:friends-of-hue-arke hue:friends-of-hue-arke
hue:friends-of-hue-eikon hue:friends-of-hue-eikon hue:friends-of-hue-senic hue:friends-of-hue-senic
hue:gradient-lightstrip-wrap hue:gradient-lightstrip-wrap hue:gradient-lightstrip hue:gradient-lightstrip
hue:liane hue:liane hue:lightstrip-tv-alt hue:lightstrip-tv-alt
hue:lightstrip-tv hue:lightstrip-tv hue:lightstrip-wrap hue:lightstrip-wrap
hue:lily-xl hue:lily-xl hue:pedestal-econic hue:pedestal-econic
hue:pendant-long-up hue:pendant-long-up hue:pillar-nyro hue:pillar-nyro
hue:pillar-spot-double hue:pillar-spot-double hue:pillar-spot hue:pillar-spot
hue:pillar-tuar hue:pillar-tuar hue:play-bar-three hue:play-bar-three
hue:play-bar-two hue:play-bar-two hue:play-bar-v-alt hue:play-bar-v-alt
hue:play-bar-v hue:play-bar-v hue:plug-eu hue:plug-eu
hue:plug-uk hue:plug-uk hue:sana hue:sana
hue:signe hue:signe hue:socket-eu hue:socket-eu
hue:socket-uk hue:socket-uk hue:socket-us hue:socket-us
hue:sync-box-alt hue:sync-box-alt hue:sync-box hue:sync-box
hue:tap hue:tap hue:wall-appear hue:wall-appear
hue:wall-attract hue:wall-attract hue:wall-econic-lantern-base hue:wall-econic-lantern-base
hue:wall-econic-lantern-top hue:wall-econic-lantern-top hue:wall-econic-lantern hue:wall-econic-lantern
hue:wall-econic hue:wall-econic hue:wall-flood hue:wall-flood
hue:wall-fuzo-h hue:wall-fuzo-h hue:wall-fuzo hue:wall-fuzo
hue:wall-impress-narrow hue:wall-impress-narrow hue:wall-impress hue:wall-impress
hue:wall-lucca hue:wall-lucca hue:wall-nyro hue:wall-nyro
hue:wall-resonate hue:wall-resonate hue:wall-tuar hue:wall-tuar
hue:wall-turaco hue:wall-turaco hue:wellner-solid hue:wellner-solid
hue:wellner hue:wellner hue:wellness hue:wellness
2 Likes

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:

frontend:
  extra_module_url:
    - /hacsfiles/hass-hue-icons/hass-hue-icons.js

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

@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]

1 Like

Thanks for getting in touch. I’ll drop you a mail tomorrow and we can talk.