> 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 - アイコン** Salesforce Lightning Design System のアイコンライブラリのアイコンを Experience Sites ページに表示する Experience Cloud コンポーネントです。

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

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

## 設定

{% tabs %}
{% tab title="🎛️ プロパティ" %}

| 名前           | 説明                             | 使用方法                                                   |
| ------------ | ------------------------------ | ------------------------------------------------------ |
| **アイコン名**    | 表示するアイコンの名前を選択します。             | 関連するコンテンツやアクションを明確に表し、補完するアイコンを選択してください。               |
| **アイコンサイズ**  | アイコンのサイズを設定します。                | アイコンがはっきりと表示され、ページレイアウト内に調和して組み込まれるサイズを選択してください。       |
| **バリアント**    | アイコンの事前定義済みのスタイルバリエーションを選択します。 | アイコンの文脈上の意味やアクションに合致し、その視覚的な伝達を強化するバリアントを選択してください。     |
| **タイトル**     | アイコンのタイトルを定義します。               | アイコンにカーソルを合わせたときに、ユーザーへ追加の文脈や情報を提供するタイトルを入力してください。     |
| **代替テキスト**   | アイコンの代替テキストを指定します。             | アイコンの意味やアクションを伝える説明テキストを入力し、アクセシビリティを確保して SEO を向上させます。 |
| **水平方向の配置**  | コンテナ内でのアイコンの水平配置を決定します。        | コンテンツレイアウト内で最適な位置に配置され、視覚的なバランスと流れが保たれるよう、アイコンを整列します。  |
| {% endtab %} |                                |                                                        |

{% tab title="🎨 スタイリング" %}

| **背景色**        | アイコンの背景色を設定します。                 | アイコンが目立ち、ページデザイン内で視覚的に区別される背景色を選択してください。                                |
| -------------- | ------------------------------- | ----------------------------------------------------------------------- |
| **前景色**        | アイコン自体の色を設定します。                 | 背景に対してアイコンがはっきり見え、全体のデザインと調和する色を選択してください。                               |
| **前景色ユーティリティ** | ユーティリティクラスを適用して、アイコンの前景色を変更します。 | CSS ユーティリティクラスを使用して、アイコンに事前定義済みの色スタイルを簡単に適用し、一貫性とデザインカスタマイズのしやすさを確保します。 |
| **角の丸み**       | アイコンの境界線の角の丸みを定義します。            | 境界線の角丸を調整して角の丸いアイコンを作成し、アイコンのスタイル表現を高めます。                               |
| {% 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.