/Homey-SVG-Icons

SVG versions of default Homey icons

Great icon sources:

https://materialdesignicons.com/ https://thenounproject.com/ https://www.flaticon.com/ https://github.com/athombv/homey-vectors-public

Tools:

https://svg-path-visualizer.netlify.app/ https://cloudconvert.com/svg-to-png (For making store images. Upload twice and use settings: 75x75 and 500x500)

Extract SVG from Homey

  1. Get the icon on screen in https://my.homey.app
  2. Right click -> Inspect
  3. Copy the large text 'url' from the --data CSS property
  4. Enter the blob on https://base64.guru/converter/decode
  5. Remove the data:image/svg+xml;base64, from the fron of the blob
  6. Click convert
  7. Save output in a .svg file
  8. Change the 'fill' attribute from #313132 to black

Tips

Transparency

Homey converts anything not-transparent to black. White backgrounds therefore turn black when shown in Homey. The keyword 'transparent' is supported by Homey but not all tools support it. Better is to use: fill="none" fill-opacity="0" for compatibility.

Homey-SVG-Icons

SVG versions (approximations) of default Homey icons

Capability Icon
measure_co
measure_co2
measure_pm25
measure_luminance
measure_humidity
alarm_water

Modified icons for custom capabilities and devices

Capability / name Icon
measure_eco2
measure_tvoc
measure_dust
measure_pm1
measure_pm10
measure_pm10
measure_luminance_full
measure_luminance_visible
measure_luminance_ir
Gasses
Alarm Generic

Other custom icons

Name Icon
Output Boolean
Output Pulse
Output PWM
Output RTTTL
Output Tone
Input Analog
Input Switch
P1 meter
Pulse counter
measure_distance_mm
measure_distance_cm
measure_distance_inch
Distance
unknown
ESP Easy
ESP Easy color