> 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-fr/experience-components/ax-icon.md).

# AX - Icône

## Aperçu

**AX - Icône** est un composant Experience Cloud qui affiche des icônes de la bibliothèque d’icônes Salesforce Lightning Design System sur les pages Experience Sites.

Utilisez-le pour ajouter des indicateurs visuels pour les actions, l’état, les catégories ou les éléments de navigation dans l’ensemble de votre portail. Configurez l’icône, la taille, la couleur et le style dans Experience Builder afin qu’ils correspondent au design de votre portail.

Idéal pour les indicateurs d’état, les boutons d’action, les en-têtes de section, les éléments de navigation ou tout autre endroit où votre portail a besoin de symboles visuels pour améliorer la lisibilité et la reconnaissance.

## Paramètres

{% tabs %}
{% tab title="🎛️ Propriétés" %}

| Nom                       | Description                                                       | Utilisation                                                                                                                                              |
| ------------------------- | ----------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Nom de l’icône**        | Sélectionnez le nom de l’icône à afficher.                        | Choisissez une icône qui représente clairement et complète le contenu ou l’action auquel elle est associée.                                              |
| **Taille de l’icône**     | Définissez la taille de l’icône.                                  | Choisissez une taille qui garantit que l’icône est clairement visible et harmonieusement intégrée dans la mise en page.                                  |
| **Variante**              | Choisissez une variante de style prédéfinie pour l’icône.         | Sélectionnez une variante qui correspond à la signification contextuelle ou à l’action de l’icône, afin d’améliorer sa communication visuelle.           |
| **Titre**                 | Définissez un titre pour l’icône.                                 | Fournissez un titre qui donne aux utilisateurs un contexte ou des informations supplémentaires lorsqu’ils survolent l’icône.                             |
| **Texte alternatif**      | Fournissez un texte alternatif pour l’icône.                      | Saisissez un texte descriptif qui transmet la signification ou l’action de l’icône, afin de garantir l’accessibilité et d’améliorer le référencement.    |
| **Alignement horizontal** | Déterminez l’alignement horizontal de l’icône dans son conteneur. | Alignez l’icône afin qu’elle soit positionnée de manière optimale dans la mise en page du contenu, tout en conservant l’équilibre visuel et la fluidité. |
| {% endtab %}              |                                                                   |                                                                                                                                                          |

{% tab title="🎨 Style" %}

| **Couleur d’arrière-plan**                | Définissez la couleur d’arrière-plan de l’icône.                                       | Choisissez une couleur d’arrière-plan qui permet à l’icône de se démarquer et d’être visuellement distincte dans le design de la page.                                                |
| ----------------------------------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **Couleur de premier plan**               | Définissez la couleur de l’icône elle-même.                                            | Choisissez une couleur qui garantit que l’icône est clairement visible sur l’arrière-plan et complète le design global.                                                               |
| **Utilitaire de couleur de premier plan** | Appliquez des classes utilitaires pour modifier la couleur de premier plan de l’icône. | Utilisez des classes utilitaires CSS pour appliquer facilement des styles de couleur prédéfinis à l’icône, en garantissant la cohérence et la facilité de personnalisation du design. |
| **Rayon de bordure**                      | Définissez le rayon des coins de la bordure de l’icône.                                | Ajustez le rayon de bordure pour créer des icônes aux coins arrondis, améliorant ainsi la présentation stylistique des icônes.                                                        |
| {% 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:

```
GET https://docs.avonnicomponents.com/experience-cloud/experience-cloud-fr/experience-components/ax-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.