# Icon

The **Icon** component allows you to display one of a set of icons in your project and dynamically color it.

![](https://addons.squirrel365.io/learn-assets/uploads/2021/05/icon-example.png)

## Icon Properties

The **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

<figure><img src="https://addons.squirrel365.io/learn-assets/uploads/2021/05/icon-general.png" alt=""><figcaption></figcaption></figure>

* **Search icons** – enter a search term into this box and press return to see a selection of related images, click on one of the icons to display it in your project
* **Block mouse events** – Checking this option will stop mouse interactions with components covered by the **Icon** component, e.g. a slider component sitting on a layer beneath the icon would not function. A partially covered component may still have some functionality. The option is checked by default.

***

### STYLING

#### ![](https://addons.squirrel365.io/learn-assets/uploads/2021/05/icon-styling.png)

* **Color / Opacity** – these set the color and opacity of the lines comprising the icon. The remainder of the icon (i.e. its background) is always transparent
* **Stroke** – this specifies the width of the lines of the icon, the value can be set either with the slider or by typing a number into the text box, valid values range from 0.5 to 2.0


---

# 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://learn.squirrel365.io/components-functions-and-connections/overview/media/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.
