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

# AX - アイコン

## 概要

**AX - アイコン** Experience Sites ページ上で、Salesforce Lightning Design System のアイコンライブラリからアイコンを表示する Experience Cloud コンポーネントです。

ポータル全体で、アクション、ステータス、カテゴリ、またはナビゲーション要素の視覚的な指標を追加するために使用します。Experience Builder でアイコン、サイズ、色、スタイルを設定して、ポータルのデザインに合わせます。

ステータス表示、アクションボタン、セクション見出し、ナビゲーション要素、または見やすさと認識性を高めるためにポータルに視覚的なシンボルが必要なあらゆる場所に最適です。

## 設定

### プロパティ

**アイコン名** 表示するアイコンを選択します — 関連付けられたコンテンツやアクションを明確に表し、それを補完するものを選んでください。 **アイコンサイズ** アイコンがはっきり見え、ページレイアウトに調和して組み込まれるようにサイズを設定します。

**バリアント** アイコンの文脈上の意味やアクションに合う、あらかじめ定義されたスタイルバリエーションを選択し、視覚的な伝達効果を高めます。

**タイトル** アイコンにカーソルを合わせたときに、ユーザーに追加の文脈や情報を提供するタイトルを定義します。

**代替テキスト** アイコンの意味やアクションを伝える説明文を提供し、アクセシビリティを確保し、SEO を向上させます。

**水平配置** コンテナー内でのアイコンの水平方向の配置を決定し、最適な位置に配置しながら視覚的なバランスと流れを保ちます。

## スタイリング

{% tabs %}
{% tab title="背景" %}

| 名称             | 説明                                | 使用例                                                                         |
| -------------- | --------------------------------- | --------------------------------------------------------------------------- |
| **背景色**        | アイコンの背景色を設定します。                   | アイコンが際立ち、ページデザイン内で視覚的に明確に区別される背景色を選択します。                                    |
| **前景色**        | アイコン自体の色を設定します。                   | 背景に対してアイコンがはっきり見え、全体のデザインに調和する色を選択します。                                      |
| **前景色ユーティリティ** | アイコンの前景色を変更するためにユーティリティクラスを適用します。 | CSS ユーティリティクラスを利用して、あらかじめ定義された配色スタイルをアイコンに簡単に適用し、一貫性とデザインカスタマイズのしやすさを確保します。 |
| {% endtab %}   |                                   |                                                                             |

{% tab title="枠線" %}

| 名称            | 説明                 | 使用例                                              |
| ------------- | ------------------ | ------------------------------------------------ |
| **境界線の角丸**    | アイコンの境界線の角丸を定義します。 | border-radius を調整して角丸のアイコンを作成し、アイコンのスタイル表現を高めます。 |
| {% 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-cloud-ja/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.