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

# Icon

The Icon component displays a Lightning Design System (SLDS) icon within your Avonni Dynamic Components, with configurable size, variant styling, tooltip title, and accessibility text. It supports standard SLDS icons and may include custom icons provided by Avonni.

## Overview

The Icon component is a simple visual element. It's used to:

* Represent actions or states visually.
* Provide visual cues for navigation.
* Add visual interest.
* Improve accessibility (with proper alternative text).

Icons enhance the visual appeal and usability of your components.

### Example 1: Static Account Icon

* Icon Name: standard:account
* Icon Size: medium
* Title: Account Icon

This displays the standard Salesforce Account icon.

### Example 2: Dynamic Icon (Formula)

* Icon Name: myStatusIcon (This is a Formula resource)
* Icon Size: small
* Variant: inverse
* Title: Opportunity Status

The myStatusIcon Formula resource might contain:

IF(OpportunityStageName = 'Closed Won', 'utility:check', IF(OpportunityStageName = 'Closed Lost', 'utility:close', 'utility:help' ) )

This changes the icon based on an Opportunity's StageName.

## Configuration

To configure the Icon, select it on the canvas. The **Edit Icon** panel opens on the right with the **Properties** and **Style** tabs. The section below mirrors the Properties tab.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2F4mimav53qTJquriPdtXs%2Ficon-builder-properties.png?alt=media" alt="The Edit Icon panel showing the Properties tab with Icon Name, Icon Size, Variant, Title and the collapsed Advanced Options" width="320"><figcaption><p>The Properties tab: Icon Name, the Icon Size button row, Variant, Title, and the collapsed Advanced Options that holds Alternative Text.</p></figcaption></figure>

### Properties

#### Icon Name

The Lightning Design System name of the icon. Use:

* **SLDS Icons**: Format `category:name` (e.g., `standard:account`, `utility:add`). Find available icons in the Salesforce Lightning Design System documentation.
* **Avonni Custom Icons**: See Avonni documentation for names.
* **Dynamic Value**: You can use a Variable, Constant, or Formula to change the icon based on data.

#### Icon Size

The size of the icon. Defaults to **Medium**. Requires **Icon Name** to be set. The panel presents the five sizes as a row of buttons labelled **Xxs**, **Xs**, **Small**, **Medium** and **Large**, which set the values `xx-small`, `x-small`, `small`, `medium` and `large`.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FhRiLTMzb4bssaUkVx00r%2Ficon-size.png?alt=media" alt="The five icon sizes side by side, each labelled with the button label shown in the panel"><figcaption><p>The five sizes, labelled as the Properties tab labels them.</p></figcaption></figure>

#### Variant

The variant changes the appearance of the icon (its color). Available values are `inverse`, `success`, `warning`, and `error`. Variants apply to `utility` icons.

<figure><img src="https://2532358799-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FAWds5DRVs6P8yPRlaQMs%2Ficon-variant.png?alt=media" alt="The four icon variants, with inverse shown on a dark background so the white glyph is visible"><figcaption><p>The four variants. Inverse draws the glyph in white, so it is shown here on a dark background.</p></figcaption></figure>

#### Title

Title of the icon, displayed as a tooltip when hovering over the icon (in most browsers).

#### Alternative Text

Alternative text for the icon, used by screen readers. Found under **Advanced Options** at the bottom of the Properties tab. Describe the icon's *purpose*, not just its appearance. Example: "Create New Account," not "Plus Sign."

{% hint style="info" %}
**Important Considerations**

* **Accessibility**: ALWAYS provide a meaningful Alternative Text.
* **SLDS Compliance**: Using SLDS icons ensures visual consistency.
* **Dynamic Icons**: Use [Variables](/dynamic-components/component-builder/resources/variable.md)/[Formulas](/dynamic-components/component-builder/resources/formula.md) to change icons based on data.
* **Icon Availability**: Check the documentation for valid icon names.
  {% endhint %}

### Set Component Visibility

All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md).

## Styling

Configure the Icon's appearance from the **Style** tab of the Edit Icon panel.

{% tabs %}
{% tab title="Margin" %}
Controls the *outer* spacing around the icon.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Padding" %}
Controls the *inner* spacing around the icon.

* **Top / Right / Bottom / Left:** Adjust the space on each side.
  {% endtab %}

{% tab title="Size" %}
Controls the icon container's dimensions.

* **Width / Height:** Set fixed dimensions.
* **Min Width / Max Width / Min Height / Max Height:** Constrain the size within bounds.
* **Overflow:** Control how content that exceeds the bounds is handled.
  {% endtab %}

{% tab title="Horizontal Alignment" %}
Sets the horizontal alignment of the icon within its container.

* **Horizontal Alignment:** Choose how the icon is justified.
  {% endtab %}

{% tab title="Color" %}
Sets the icon colors.

* **Background:** Set the icon's background color.
* **Foreground:** Set the icon (glyph) color.
  {% endtab %}

{% tab title="Border" %}
Customizes the icon border.

* **Radius:** Round the corners of the icon.
  {% 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/dynamic-components/components/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.