> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-icon.md).

# AX - Icona

## Panoramica

**AX - Icona** è un componente di Experience Cloud che visualizza icone dalla libreria di icone Salesforce Lightning Design System sulle pagine di Experience Sites.

Usalo per aggiungere indicatori visivi per azioni, stato, categorie o elementi di navigazione in tutto il tuo portale. Configura l'icona, la dimensione, il colore e lo stile in Experience Builder per adattarli al design del tuo portale.

Perfetto per indicatori di stato, pulsanti di azione, intestazioni di sezione, elementi di navigazione o ovunque il tuo portale abbia bisogno di simboli visivi per migliorare la leggibilità e il riconoscimento.

## Impostazioni

{% tabs %}
{% tab title="🎛️ Proprietà" %}

| Nome                         | Descrizione                                                                      | Utilizzo                                                                                                                                            |
| ---------------------------- | -------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Nome icona**               | Seleziona il nome dell'icona da visualizzare.                                    | Scegli un'icona che rappresenti chiaramente e completi il contenuto o l'azione a cui è associata.                                                   |
| **Dimensione dell'icona**    | Imposta la dimensione dell'icona.                                                | Scegli una dimensione che assicuri che l'icona sia chiaramente visibile e armoniosamente integrata nel layout della pagina.                         |
| **Variante**                 | Scegli una variante di stile predefinita per l'icona.                            | Seleziona una variante che si allinei al significato contestuale o all'azione dell'icona, migliorandone la comunicazione visiva.                    |
| **Titolo**                   | Definisci un titolo per l'icona.                                                 | Fornisci un titolo che offra agli utenti un contesto o informazioni aggiuntive quando passano il mouse sopra l'icona.                               |
| **Testo alternativo**        | Fornisci il testo alternativo per l'icona.                                       | Inserisci un testo descrittivo che trasmetta il significato o l'azione dell'icona, garantendo l'accessibilità e migliorando la SEO.                 |
| **Allineamento orizzontale** | Determina l'allineamento orizzontale dell'icona all'interno del suo contenitore. | Allinea l'icona per assicurarti che sia posizionata in modo ottimale all'interno del layout dei contenuti, mantenendo equilibrio visivo e fluidità. |
| {% endtab %}                 |                                                                                  |                                                                                                                                                     |

{% tab title="🎨 Stile" %}

| **Colore di sfondo**           | Imposta il colore di sfondo dell'icona.                                       | Scegli un colore di sfondo che faccia risaltare l'icona e la renda visivamente distinta nel design della pagina.                                               |
| ------------------------------ | ----------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Colore in primo piano**      | Imposta il colore dell'icona stessa.                                          | Scegli un colore che assicuri che l'icona sia chiaramente visibile sullo sfondo e che completi il design complessivo.                                          |
| **Utilità colore primo piano** | Applica classi di utilità per modificare il colore in primo piano dell'icona. | Utilizza classi di utilità CSS per applicare facilmente stili di colore predefiniti all'icona, garantendo coerenza e facilità di personalizzazione del design. |
| **Raggio del bordo**           | Definisci il raggio degli angoli del bordo dell'icona.                        | Regola il raggio del bordo per creare icone con angoli arrotondati, migliorando la presentazione stilistica delle icone.                                       |
| {% endtab %}                   |                                                                               |                                                                                                                                                                |
| {% endtabs %}                  |                                                                               |                                                                                                                                                                |


---

# 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.avonnicomponents.com/experience-cloud/experience-cloud-it/experience-components/ax-icon.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.