> For the complete documentation index, see [llms.txt](https://docs.polarity.io/integrations/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.polarity.io/integrations/build-an-integration/customizing-the-overlay-window/templates/displaying-icons.md).

# Displaying Icons

## General Usage

You can make use of font-awesome 5 icons in your template through the `fa-icon` helper. For a list of available icons please see: <https://fontawesome.com/icons?d=gallery>

To use the icon helper you must pass in the name of the icon you wish to display.  For example, to display the "info" icon you would do the following.

{% code title="template.hbs" %}

```markup
{{fa-icon icon="info"}}
```

{% endcode %}

## Sizing Icons

You can change the size of the icon by passing in the `size` parameter

{% code title="template.hbs" %}

```
{{fa-icon icon="info" size="2x"}}
{{fa-icon icon="info" size="3x"}}
{{fa-icon icon="info" size="4x"}}
```

{% endcode %}

## Spinning and Rotating Icons

To make an icon spin you can add the `spin=true` parameter.&#x20;

{% code title="template.hbs" %}

```markup
{{fa-icon icon="sync" spin=true}}
```

{% endcode %}

For a list of icons that work well as spinners please see: <https://fontawesome.com/icons?d=gallery&c=spinners>

You can also rotate icons a fixed amount using the `rotation` parameter.

{% code title="template.hbs" %}

```
{{fa-icon icon="square" rotation=90}}
{{fa-icon icon="square" rotation=180}}
{{fa-icon icon="square" rotation=270}}
```

{% endcode %}

## Fixed Width Icons

Oftentimes you will want to use a list of icons where the icons are all the same width.  You can accomplish this using the `fixedWidth=true` parameter.

{% code title="template.hbs" %}

```markup
<ul>
    <li>{{fa-icon icon="info" fixedWidth=true}} Info</li>
    <li>{{fa-icon icon="question" fixedWidth=true}} Help</li>
    <li>{{fa-icon icon="bell" fixedWidth=true}} Alerts</li>
</ul>
```

{% endcode %}

## Icons in  List

If you'd like to replace the default bullets in a list with icons you can do that as well using the `fa-ul` and `fa-li` classes.

{% code title="template.hbs" %}

```markup
<ul class="fa-ul">
    <li><span class="fa-li">{{fa-icon icon="check-square"}}</span>List icons can</li>
    <li><span class="fa-li">{{fa-icon icon="check-square"}}</span>be used to</li>
    <li><span class="fa-li">{{fa-icon icon="spinner" spin=true}}</span>replace bullets</li>
    <li><span class="fa-li">{{fa-icon icon="square"}}</span>in lists</li>
</ul>
```

{% endcode %}

{% hint style="info" %}
For more information on how to use the `{{fa-icon}}` helper please see <https://github.com/FortAwesome/ember-fontawesome>
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.polarity.io/integrations/build-an-integration/customizing-the-overlay-window/templates/displaying-icons.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.