> 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**, **Interactions**, and **Style** tabs. The section below mirrors the Properties tab.

### 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. Valid values include `xx-small`, `x-small`, `small`, `medium`, and `large`. Defaults to `medium`.

#### Variant

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

#### 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. 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).


---

# 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.