Documentation / Widgets / Basic / Icon

Icon

One icon from the icon library. On the device it is a label showing one character of an icon font made for its size, so it is coloured by the Main part's Text colour and opacity, in every state, and the Text group's font and spacing settings are not offered. The widget is the icon's box: resizing it resizes the icon. In an ESPHome project the icon can also be one of Material Design Icons, chosen by name.

Group: Basic · Default size: 32 × 32 · Style parts: Main

A dropped Icon: a small house outline in the middle of the screen.
An Icon as it is dropped: Home, 32 px.
The Icon settings section: Icon Home, Size 32 px.
Its settings.
SettingDefaultWhat it does
IconHomeWhich icon. The picker searches names and what an icon is for.
Size32 px8 to 160 px - also the widget's width and height. 21, 42 and 63 px are the sharpest.

Example: a coloured Wi-Fi mark

  1. Drag an Icon onto the screen. Under Icon settings click Icon, type wifi in the search and choose the Wi-Fi mark; set Size to 42.
  2. Open Style settings, then Text, and set Color to #00A152. An icon is drawn in its text colour.
  3. Drag a Label beside it saying Connected.
A green Wi-Fi icon with the word Connected beside it.
A green status mark.
Style settings, Text group open: Color #00A152 marked as changed, and Opacity.
The colour of an icon is its Text colour.