The standard Domoticz install contains a number of pre-defined icons for use in the web-interface. However, you might want to use some non-standard icons (e.g. for your smartphone) and how to do this easily is described in this tutorial.

Custom Icons uploader

Goto Setup - More Options - Custom Icons

Select the Icons zip file created by the following instructions (online and manual) and upload. After selecting you can change the Name and Description.

Galleries with already made icons

The following repositories host some icons zip files that can be useful for Domoticz users to be imported with the Customs Icons uploader.

Creating simple home made icons

Online

Here is a very simple way to create nice on/off icons: Online generator

Manual

Since we're using Paint.NET in this tutorial (which uses the .NET framework) this is only available for Windows users. For other Operating Systems you can check out; GIMP

In this example we're going to use the Domoticz logo used on the Wiki page; DOMOTICZ_LOGO

It's best to save the created images in a separately-created folder

Be sure to save (CTRL + S) your image multiple times throughout the editing. This way you won't have to start all over again if something goes wrong.

1.
Download and install Paint.NET

2.
Launch the Paint.NET application

3.
Search for the correct image/icon of your choice on the internet. Most of the images are larger than the 48x48 dimensions we need. Since we probably are going to do some editing, don't pick any image smaller than 250x250. Otherwise most of the details will be lost after resizing.

4.
Open the image (Domoticz Logo)

5.
Delete the areas of the image you don't want to use. In this case the white corners.
This is easily done by using the Magic Wand tool. Just click the Magic Wand tool and then click on the white corner in the image. The entire white area is now selected.

It's possible to select multiple items bij holding the CTRL button. You can delete a selected-area by pressing the DELETE button on your keyboard.
You can now see that the background is transparent because of the checkered pattern. If you repeat this step for all 4 corners you'll end up with only the Domoticz logo on a transparent background.

6.
Now we have the correct image details but still with the wrong size.
Resize the image through the resize menu; Image - Resize (CTRL + R).
Resize By absolute size. This way you can enter the exact pixels for your image; Width: 48 pixels, Height: 48 pixels.
Click the OK button; Voila! Your image has been resized.

7.
We can use the current image as the 'ON' image. Save (As) the image as a .PNG file (default) and name it; domoticz48_On.png

On the Save Configuration screen use the 'Auto-detect'

8.
Since we still have the 'ON' image opened we now can make the small image (16x16) used on your floorplan. Again use the resize menu (CTRL + R) only this time resize the image to: Width: 16 pixels, Height: 16 pixels Save (As) the image as a .PNG file (default) and name it; domoticz.png

9.
We now want to create the exact same 48x48 icon but it must look like an 'Off' status. The best way to do this is by making it grey style and/or adjusting the Brightness/Contrast.
Use the "History" window to go back through the editing step(s) to the point at which you are back in the 48x48 pixel image. (Or open the Domoticz48_On.png file again)
Go to the Adjustments-menu and select Black and White (CTRL + SHIFT + G)
If you are happy with the result just save (as) the image as; domoticz48_Off.png. Otherwise you can adjust the image by using the Brightness / Contrast setting and afterwards save the image.

10.
Almost there; We need to create the icons.txt file.

In this case it looks as follows;

Domoticz;Domoticz;Domoticz Logo

You'll eventually end up with 4 files;

Domoticz.png
Domoticz48_On.png
Domoticz48_Off.png
icons.txt

11.
Final step, Uploading in Domoticz
Add all 4 files to a ZIP file; Select all 4 files, right-click your mouse button and select: Send To - Compressed (zipped) folder. You can now use this Zipped folder with your freshly-created logo in Domoticz by uploading it in the Setup - Custom Icon menu.

Note:
This is a very basic and easy-to-edit logo. If you play with the different options in Paint.NET you'll eventually start using the other selection tools, erasers, clone stamps and of course; LAYERS! It all comes down to your own creativity and imagination.

Format of the icons

The icons for the dashboard are .PNG files, resolution 48x48 pixels. You can find icons on many sites, or make them yourself
Icons with a transparent background are preferred.

Have a look at https://www.iconfinder.com and http://www.iconspedia.com for some nice icons.
Pay attention that most of them are only licensed free for limited home use. So spreading/distributing them yourself is usually not allowed (even after editing!).

Selecting the icon you've created

When you navigate to the Domoticz web-interface, edit a switch. If you performed all the steps correctly, your custom icon(s) should now be visible!

Backup

If the icons you have made are working correctly, it is advisable to make a backup of the icons together with the modified icon-description file (switch_icons.txt). Otherwise they might be accidentally overwritten when you update Domoticz.

Custom icons for webinterface

Contents