Icons: library, custom uploads, glow and backgrounds
Buttons, data widgets and labels can show an icon. Pick one from the built-in library or upload your own, then optionally add a glow ("Turn it on") or a coloured background shape.
Choose an icon
Select the widget and make sure Show icon is on in the Icon section.
Click the Icon field. The Select icon window opens.
Type in the search box (for example light, blind, fan) or click a category: Default, Lighting, Power, Home & rooms, Climate, Security, Media, Blinds, Controls, Fans, Moods, Sensors, Devices, Network, Documents, People, Tools, zencontrol, Status, Location, General, Schedules.
Click an icon to apply it.
Set Icon colour to a theme token (Label Colour by default) or a custom colour.
The zencontrol category holds icons for zencontrol products and sensors, useful for technical or service pages.
Upload your own icon
In the Select icon window, click Upload custom icon and choose an image file. Use a simple, single-colour SVG or PNG with a transparent background so it scales cleanly. Remove icon clears the icon from the widget.
Turn it on (glow effect)
Turn it on creates a lit version of the icon, for example a pendant with a beam of light. It is a good way to show an "on" state.
Under the Icon field, click Turn it on.
Set the options and watch the preview:
| Option | Effect |
|---|---|
| Colour | Yellow, RGB or Custom glow colour |
| Icon colour | Colour of the fixture outline |
| Beam direction | Up, down, left, right or centre |
| Beam spread | Width of the beam (%) |
| Beam opacity | Strength of the beam (%) |
| Glow strength | Halo around the icon (%) |
| Add rays | Adds light rays |
| Icon name | Name used to identify the glow icon |
Click Save. The link under the icon now reads Edit glow, so you can come back and adjust it.
Add background
Add background puts the icon on a solid shape.
Click Add background under the Icon field.
Choose Circle or Square, a Colour and an Icon scale (how large the icon sits within the shape).
Click Save.
Glow and background effects can be re-edited later without starting again.
Tips
Use the same icon set and colour across a page; mix styles only to highlight something (for example a red All off).
Icons on a small 1 x 1 button read better with the label turned off or moved below the icon in Edit Layout.
