# Trend Icon

{% hint style="success" %}
**Who can use this feature?**

All Squirrel365 plans include the Trend Icon component. 

For more details, see our [**pricing comparison matrix**](https://squirrel365.io/pricing/).
{% endhint %}

{% hint style="info" %}
Squirrel 1.12 introduced a “Quick Set-up” tab on many property panels. The properties described on this page are available on the “All Properties” tab of the property panel. For more details on “Quick Set-Up” properties see [**this article**](https://squirrel365.gitbook.io/learn/how-tos/set-property-values)
{% endhint %}

The **Trend Icon** is a visualization component that can be used to immediately display an upward, downward, or steady trend based on a value above or below 0.

<div><figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FnMCecyhQlFBe1ZZWNxJu%2FNegative.png?alt=media&#x26;token=e703c7db-6667-4dfe-8d67-56d1191513ca" alt=""><figcaption></figcaption></figure> <figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2Fhlb4QEE6iFZwYSXF06ey%2FNeutral.png?alt=media&#x26;token=ad3d0191-ebfe-45f0-bde2-7329580ec508" alt=""><figcaption></figcaption></figure> <figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FHVlPSeCpDGyAlELiOCCs%2FPositive.png?alt=media&#x26;token=785ceeec-1c03-4a50-b41e-6a2991ff7dd2" alt=""><figcaption></figcaption></figure></div>

## Trend Icon Properties

The **Trend Icon** component properties consist of **LAYOUT & POSITIONING, GENERAL, STYLING,** and **DYNAMIC VISIBILITY** sections.

This guide will describe all sections besides the [**Layout & Positioning**](https://learn.squirrel365.io/components-functions-and-connections/overview/layout-and-positioning) and [**Dynamic Visiblity**](https://learn.squirrel365.io/getting-started/core-concepts/dynamic-visibility) sections, as these are generic to each component. A separate guide and tutorial for each can be found by clicking the links above.

The component properties are set and edited using different methods, some have multiple methods, some just one. See this [Set Property Values](https://squirrel365.io/knowledgebase/set-property-values/) article for more information on using the different methods.

***

### GENERAL

* **Trend value** - an input property that is bound to the spreadsheet. This is the value that determines the trend icon displayed, ranging from **Negative** (below zero), **Zero** and **Positive** (above 0)
* **Icon set** - a dropdown to select the icon set that is displayed on the component.

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FUS2AEXP4RwNT9WhCETN4%2FGeneral.png?alt=media&#x26;token=8a6a3b49-54f2-47e8-aa61-9c3b1a60fdcb" alt=""><figcaption></figcaption></figure>

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FhLe0pNy9Ad0jwsMTMkCs%2FIconSets.png?alt=media&#x26;token=c29b538e-86c2-4ce5-9f39-6bebc10ff91a" alt=""><figcaption></figcaption></figure>

***

### STYLING

These properties apply to the styling options for the Trend Icon

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FIgmUcm3TKDKhCnsrB0zl%2FStyling.png?alt=media&#x26;token=c0b3a017-1763-47a3-8adf-b91c7aba1cdb" alt=""><figcaption></figcaption></figure>

* **Positive**
  * **Positive Icon Color** - an input property to set the Positive Icon color
    * **Opacity** - an input to adjust the opacity of the Positive Icon color
  * **Positive Background** - an input property to set the Positive Icon background color
    * **Opacity** - an input to adjust the opacity of the Positive Icon opacity color

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FBREWpko4oPOhKtA8NZwU%2FStyling_TrendIcon_Positive.png?alt=media&#x26;token=d38b1f89-8095-47e6-a04d-168fa4cb825f" alt=""><figcaption></figcaption></figure>

* **Zero**
  * **Zero Icon Color** - an input property to set the Zero Icon color
    * **Opacity** - an input to adjust the opacity of the Zero Icon color
  * **Zero Background** - an input property to set the Zero Icon background color
    * **Opacity** - an input to adjust the opacity of the Zero Icon opacity color

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2F0lHgQQJ7MmxuZWeFyZZa%2FStyling_TrendIcon_Zero.png?alt=media&#x26;token=52fd7c0c-eb6d-4952-ab9e-6bc9e53f5a5f" alt=""><figcaption></figcaption></figure>

* **Negative**
  * **Negative Icon Color** - an input property to set the Negative Icon color
    * **Opacity** - an input to adjust the opacity of the Negative Icon color
  * **Negative Background** - an input property to set the Negative Icon background color
    * **Opacity** - an input to adjust the opacity of the Negative Icon opacity color

<figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FVE9PgG2pjAs2iHhwfQI7%2FStyling_TrendIcon_Negative.png?alt=media&#x26;token=ef57e2b5-a52f-4eeb-becd-c5d96724024c" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
If the 'face' or 'check/exclamation/cross' options are selected, then **Corner** properties are added to each of the styling sub-sections.

* **Corners** – This property determines the corner radius of the **Rectangle** component border. Use the slider to amend this property, or type a numerical value into the property field.

  * **Individual Corners** - selected this property to apply different radii to each of the component's corners. Each of these individual inputs can be manually edited or bound to the spreadsheet.

  <div data-full-width="true"><figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FlLkSh3VgvlHI4C7YlEbH%2FIconSets_corners.png?alt=media&#x26;token=c64c2bf6-c882-4cde-a4fa-7d28df45ecd0" alt=""><figcaption></figcaption></figure></div>

  <figure><img src="https://911720298-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FkLBGzn2hXrIMe50klQCv%2Fuploads%2FNfVRXS51obqBHmlaiLgB%2FIconSets_cornersproperties.png?alt=media&#x26;token=91692000-36f9-4917-ab21-f035f5c9cc3a" alt=""><figcaption></figcaption></figure>

{% endhint %}