Using own icons possible?

📝 Dashboards Hubitat Dashboard
19

I made them. If you open your dashboard from the hubitat, click on the gear on the top right, choose advanced on the top right of the popup, then CSS near the top left, you can customize the look of the dashboard which is all just HTML & CSS. If you're not familiar with CSS and web design, it may be a little daunting. Here is everything I have in mine. I've moved so I'll need to build a whole new dashboard, but I am fond of the thin sliders on a phone screen.

.tile.bulb {
    overflow: visible !important;
    font-weight: bold !important;
    background-color: rgba(128, 128, 128, 0.5) !important;
}

.tile.bulb .tile-primary {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.tile.bulb .tile-primary i {
    font-size: 25px !important;
    position: absolute;
    left: 10px;
    top: 8px;
    color: rgba(0, 0, 0, 0) !important;
    text-shadow:none;
    background-repeat: none;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAxQAAAMUBHc26qAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALUSURBVEiJpVRNSFRRFP7OeW8czVpkCoHzxjs/YgVCi9kUtHDRooiIduWyTYsgIs0WrqIgA9sEQYsMImlnIBXUIqNNtTASBZ86M2/GyQgLkyxS57132ow183xvZqADd/Od73zfPffce0lEUG90RuMnAWBhMTtebw37CnV2hvdHInu8uGjSIpq0eHEiolQqFarbwLbt3UU99LSHenSvR2lVRLxDDf9YWTlUt4FlWV8gePJJ5frLcT0cHtPD4bEK8Wj8CCBt89nsm7oNAMBYVLchslyOmaa5ZprmWjmmMbo2HedikA5tDTmZTBrpdLrgR0oqdRjAMQh1C4NJaJoZL4J2Xa71zyAWGwKwT2wezBQy0wDQ3t6+oykUugmhBmY8cJhNbCLKmrPTBZ8jEbvxd3PfzPLMTwBIGIlu0txrJMgt5K1LFUeUtqwBBxhg3e3dwpr0hhEQPU/nrfPzlvWeN3gX6e4FAQ0TYArJ+Hrzr9G/W2f3jMt0dUu8ogNvJJTqJUClc7kb286ViBNR1QfgAEgWCPi+kMvd9dMJHDKBeo18bMgvJyJuOm/dAmODRZsS8NkgHV+D0v2nCZmwgwoBAI52R8g9DmDdMIymug1yKtcKYLWqOIBMITMrhDVAvjZr2l5fkoj4rkSHehWU8+G+RWme3lVtBitdhtFeq4sSZ1UCbkuwAcl1h/X7RKQFc0izWR+BuINBnECDecv6CNCzuFL9QZykUleI5GU6n58M4lQ9WwAU71DvIpFIizcXjUZ3JzrUBwBcTSOwg5K5MORhoxY67c3pzKcI8khE3Goa3v9+WxDRpAu5nIzFvlXggqMgulervqaB6PqsbNozRJSqwEVMhzD13wbkOAeJcQKuZCtwomSI8BqA75ddv0GxmAHrn0HwvFQpUNHO1KqvOmQAmCsUlsB4DCrjEpiERucKhaVa9TU7AAAItQHSLEARAEgQclla6yn9A4SeiBY2z7y/AAAAAElFTkSuQmCC')
}

.tile.bulb .tile-primary.on i {
    background-repeat: none;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAAAsQAAALEBxi1JjQAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAAMuSURBVEiJpZNdaFNnGMf/z3u+kub0w1SS1drmnBzKEDu8qUP3cTsQxJvhmLIN5sWm9KLrQNHinehA0THGFAaOwRjuajgpKH6sUHFzrhfdWKGQJllqmsR0TbcmaZvmnPPuQgNNek5PxAfei/f5+P/e933ehzjnaNaigegBAEiUEzearWFOzn7ql/UtekejnxMPcuLBRj8R0QANSE0DVtXVDqriJyISGhnPVp1pAe1iQS3sbRowU5zJE3BdD+jDdckyu674lR/X+6Jt0TcZ0JUoJsadtMA5d1wAhGhL5IhbvLb0Fv0jQzVCbnGqNdloN/ri/8VjTofo64i+Feq0DhHR7meH+j2/IFyL/Zu47ZRvtBi98eX4LIB1AFX/nAM7ibOReDk+AQBG0GgPtdvfDeyyXv/wXTOoR2xknxBWVghXr4mFyb/ofqHof396frr4VMN4hcM+S0A8XkoOb3iiiBrZoQW0z2r7PVrvo9tXtpl8Ksz5VJhnx17iI+9t52/v6eVfn+rmo19sM1/TI7/W8rWAdk5v1V92fKJGezWiDx3cXz1zfNBsbYzZNvDtDyKmZxhaVV4avSON/JZKfOmk4/iLAMAn24OfHt0oDgCMAUcOm1AUjr0DtipJ9pCbjiOgh3r8qgpVaJyCBvvgHRNjDxhaAzzwXIMm+sRwaOvm4gBgRDj8fiAcAl8ILHQ2DUiuJP9OPYbpBWAMOP1JFekMVZKlZK5pAABU1iiTmycvBnLzhEoFc66HcAtk83T02Ak5b9nu4pYNDJ6U87kn/OPnBiRLycm5LJ3/6qq05JZz+RuxlM7hYqyYmnLLcZ2Dmr1haKnR7yu9HW31eUtFwr7DytwviVQP30TE9QY1WzPpyq17bEPDb/7MTLOKy5uJA4DoBSgs8vF794XVYBDqev/dcaGSX6QHXvWeAJ9P/fPRZPncxB+krPfbnFWYxCZfGFAulfvD3eGhru6uuv+UTWfYUiY/BuDhCwEssmYty5rJpOfqZtu2+T8ixLRXvWeTZ8uzmeJi8YLABFGWZFmWZFlgglhaKl2KLcc8AZ43AADFr+iCJKiy/LQNZnUNik/Rmqn9H2xOjXeTdp54AAAAAElFTkSuQmCC')
}

.tile.bulb .dimmer {
    width: 40%;
    position: absolute;
    right: 25px;
    top: 2px;
}

.tile.bulb > .tile-title {
    width: 45%;
    margin-left: 35px;
    text-align: left;
    bottom: 8px;
}

.tile.bulb .dimLevel {
    position: absolute !important;
    right: -2px !important;
    top: 10px !important;
}
3 Likes