# Icon

The **Icon** component is used to display information visually within your apps. [Enum](/reference/data-model/enumerated-types.md) 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. 


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.appfarm.io/library/ui-components/icon.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.