Change the icon background

You are here:
< Back


CSS Code

While our built-in colour picker allows you to change the colour of all the icons, you may wish to have a custom colour for each feature…

Add this code to the CSS box. You will change the hex code (e.g #0099C7) of each line to change its colour.


.layout li:nth-child(1) {
background-color: #0099C7;
.homepage .layout li:nth-child(2) {
background-color: #ffd64b;
.homepage .layout li:nth-child(3) {
background-color: #ff3a2e;
.homepage .layout li:nth-child(4) {
background-color: #9d5cad;



  • This will only change the first 4 icon backgrounds, you can always copy and paste lines to add new ones. Just remember to change the (4) to (5) and change the colour.