# Icon

The Icon component allows you to display icons within your Avonni Dynamic Components. It supports standard Salesforce Lightning Design System (SLDS) icons and may include custom icons provided by Avonni. Icons enhance the visual appeal and usability of your components.

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

***

## Properties

The Icon component has these properties in the Properties Panel:

* API Name: A unique identifier for the component.
* Icon Name: (Text) The 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.
* Icon Size: (Text) The icon's size. Options usually include:
  * x-small
  * small
  * medium
  * large
  * x-large
* Variant: (Text) The icon's style (color). Only works with `utility` icons. Options often include:
  * base
  * error
  * warning
  * success
  * inverse
* Title: (Text) Alternative text for the icon. Essential for accessibility! This text is:
  * Used by screen readers.
  * Displayed as a tooltip on hover (in most browsers). Describe the icon's *purpose*, not just its appearance. Example: "Create New Account," not "Plus Sign."
* Visible: (Boolean) Controls visibility, supports dynamic show and hide.

***

## Examples

### Example 1: Static Account Icon

* Icon Name: standard:account
* Icon Size: medium
* Variant: base
* 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.

***

## Important Considerations

* **Accessibility**: ALWAYS provide a meaningful Title.
* **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


---

# Agent Instructions: 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/dynamic-components/components/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.