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

# AX - Icon

## Overview

**AX - Icon** is an Experience Cloud component that displays icons from the Salesforce Lightning Design System icon library on Experience Sites pages.

Use it to add visual indicators for actions, status, categories, or navigation elements throughout your portal. Configure the icon, size, color, and styling in Experience Builder to match your portal's design.

Perfect for status indicators, action buttons, section headers, navigation elements, or anywhere your portal needs visual symbols to improve scannability and recognition.

## Settings

{% tabs %}
{% tab title="🎛️ Properties" %}

| Name                     | Description                                                          | Usage                                                                                                               |
| ------------------------ | -------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------- |
| **Icon Name**            | Select the name of the icon to be displayed.                         | Choose an icon that clearly represents and complements the content or action it is associated with.                 |
| **Icon Size**            | Set the size of the icon.                                            | Choose a size that ensures the icon is clearly visible and harmoniously integrated within the page layout.          |
| **Variant**              | Choose a predefined styling variant for the icon.                    | Select a variant that aligns with the contextual meaning or action of the icon, enhancing its visual communication. |
| **Title**                | Define a title for the icon.                                         | Provide a title that gives users additional context or information when they hover over the icon.                   |
| **Alternative Text**     | Provide alternative text for the icon.                               | Enter descriptive text that conveys the meaning or action of the icon, ensuring accessibility and enhancing SEO.    |
| **Horizontal Alignment** | Determine the horizontal alignment of the icon within its container. | Align the icon to ensure it is positioned optimally within the content layout, maintaining visual balance and flow. |
| {% endtab %}             |                                                                      |                                                                                                                     |

{% tab title="🎨 Styling" %}

| **Background Color**         | Set the background color for the icon.                            | Choose a background color that ensures the icon stands out and is visually distinct within the page design.                             |
| ---------------------------- | ----------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| **Foreground Color**         | Set the color of the icon itself.                                 | Choose a color that ensures the icon is clearly visible against the background and complements the overall design.                      |
| **Foreground Color Utility** | Apply utility classes to modify the foreground color of the icon. | Utilize CSS utility classes to easily apply predefined color styles to the icon, ensuring consistency and ease of design customization. |
| **Border Radius**            | Define the corner radius of the icon's border.                    | Adjust the border radius to create icons with rounded corners, enhancing the stylistic presentation of the icons.                       |
| {% 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-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.