# 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: 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.polarity.io/integrations/build-an-integration/customizing-the-overlay-window/templates/displaying-icons.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.