# Icon

### ![](https://1449034948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-L_NpOsk0sjotPXNy29Q%2Fuploads%2F5HwDZKYKLICNKLo5XoVj%2FIcon.png?alt=media\&token=64b0387c-dd61-47cc-b4d5-9b70e48ddb94)

The icon widget lets you add icons to text fields or labels. Select the icon widget and drag it to your canvas to a location where a green line appears, this means you can place a icon there. It can not be dropped directly onto the canvas but needs to be within at least an "active" element (like a Rich Text element). 

When you add an icon a movable menu pops up with the different icons available in the modeler where you can choose the icon you want. This menu can be navigated with the use of arrow-keys and the tab-key and has your recently used icons in a separate section at the top. 

<figure><img src="https://1449034948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-L_NpOsk0sjotPXNy29Q%2Fuploads%2F7nmDMveYVIx1jXKBn4hk%2Fimage.png?alt=media&#x26;token=372ef7c1-a187-4f94-9b47-ef0cfd444b91" alt=""><figcaption></figcaption></figure>

## Properties

When an icon is selected the following options appear in the properties pane:&#x20;

<figure><img src="https://1449034948-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-L_NpOsk0sjotPXNy29Q%2Fuploads%2FL1sDuZZ6PyotS4cNpZJM%2Fimage.png?alt=media&#x26;token=da831192-e7a5-4bbf-93f0-36ef8ceedd9c" alt=""><figcaption></figcaption></figure>

* Icon: Change the used icons by selecting the flag and selecting another icon from the menu or type the technical name in the icon box.&#x20;
* Appearance\
  Style: Select a color from the template colors. \
  Size: Size of icon in number of pixels