# Icon

The **Icon** component is used to display information visually within your apps. [Enum](https://docs.appfarm.io/reference/data-model/enumerated-types) values can be linked to **Icons** during their definition, and **Icons** can be otherwise used to display information in an intuitive way. These icons can be selected from within our internal library.

{% hint style="info" %}
An example setup of an Icon is showcased in our [Showroom](https://showroom.appfarm.app/ui-components/icon)! You may view a demo and access how it was set up using Appfarm Create. If you do not have access, you may register [here](https://showroom.appfarm.app/sign-up).
{% endhint %}

### Badge

A common use for the **Icon** component is to combine it with a Badge. This badge can be used to display a numerical or String value to the user. For example, in an app with built-in notifications, a bell icon can be used with a Badge that displays the number of new notifications the logged-in user has. Alternatively, in an e-commerce app, a cart icon can be used with a Badge to display the number of items currently in the cart.

{% hint style="info" %}
The Badge is automatically hidden if the output is 0 or an empty string.
{% endhint %}

### Conditional Properties

The Badge color, Icon, and Icon Colour can all be changed during runtime based on a condition. For instance, the Icon can be displayed in the "Error" color (red) if a rating is under 25%.

### On Click

Icons support On Click functionality to link the UI component to an action. Icon Buttons can also be used to achieve this functionality, which is recommended.