# Icon

![](https://1781865142-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LvaO9X8rr2FG8JwKkhC-1769347644%2Fuploads%2Fgit-blob-eca94d7ae60a3eaf4bc92bc8fc7bf03d64553fec%2FCaptura%20de%20Pantalla%202020-02-06%20a%20la\(s\)%2016.04.43.png?alt=media)

### 🎨 Styles

* **Typography**
  * **Font size**: size of the icon that appears on the icon element.
* **Appearance**
  * **Text color**: select icon color in the icon element using the [color picker](https://docs.apphive.io/apphive-documentacion/reference/estilos/color-picker).
* **Margins**
  * **Margin**: you can specify how much space you want between the edges of the icon element with the screen or another elements.

### ⚙ Properties

* **Generic properties**
  * **Control name:** you can add a name to the icon this could be the way to identify this element about another elements.
  * **Enable** [**skeleton loaders**](https://docs.apphive.io/apphive-documentacion/reference/estilos/skeleton-loader)**:** this tool provides an indication to the user that something is coming but not yet available on the icon element.
  * **Control is hidden:** hide the icon element from the screen.

{% hint style="info" %}
The [**skeleton loader**](https://docs.apphive.io/apphive-documentacion/reference/estilos/skeleton-loader) component provides a user with a visual indicator that content is coming/loading. This is better received than traditional full-screen loaders.
{% endhint %}

* **Specific Properties**
  * **Icon picker:** select a custom icon for the icon element.
  * **Enable icon badge**: They allow icons display important data to the user in realtime. They might show how many users are online, a notification count, or the number of unread messages.
  * **Background color:** select the background color using the [color picker](https://docs.apphive.io/apphive-documentacion/reference/estilos/color-picker).
  * **Text color**: select icon color in the icon element using the [color picker](https://docs.apphive.io/apphive-documentacion/reference/estilos/color-picker).
  * **Badge text:** add \*\*\*\*any combination of letters, numbers, and symbols to the icon badge.

### \*\*\*\*👆 Events

* **On press:** the on press event provide the capability to capture tapping gestures and display feedback when this gesture is recognized.

### 📝 Writable Properties

* **Badge text**
* **Style color**