> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# アイコン

<Frame>
  <img src="https://mintcdn.com/twenty/GMeQVDsw5ST_LXpE/images/user-guide/objects/objects.png?fit=max&auto=format&n=GMeQVDsw5ST_LXpE&q=85&s=f753eac3bada05044c64e7af9ddea9ab" alt="ヘッダー" width="1440" height="680" data-path="images/user-guide/objects/objects.png" />
</Frame>

アプリ全体で使用されるアイコンの一覧。

## Tabler Icons

アプリ全体で React 向けの Tabler Icons を使用しています。

<Tabs>
  <Tab title="インストール">
    <br />

    ```
    yarn add @tabler/icons-react
    ```
  </Tab>

  <Tab title="プロパティ">
    各アイコンをコンポーネントとしてインポートできます。 例はこちら：

    <br />

    ```jsx theme={null}
    import { IconArrowLeft } from "@tabler/icons-react";

    export const MyComponent = () => {
      return <IconArrowLeft color="red" size={48} />;
    };
    ```
  </Tab>

  <Tab title="プロパティ">
    | プロパティ | タイプ    | 説明                  | デフォルト        |
    | ----- | ------ | ------------------- | ------------ |
    | サイズ   | 数      | アイコンの高さと幅（ピクセル単位）   | 24           |
    | カラー   | string | アイコンの色              | currentColor |
    | ストローク | 数      | アイコンのストローク幅（ピクセル単位） | 2            |
  </Tab>
</Tabs>

## カスタムアイコン

Tablerアイコンに加えて、アプリにはいくつかのカスタムアイコンも使用されています。

### アイコンアドレス帳

アドレス帳のアイコンを表示します。

<Tabs>
  <Tab title="使用方法">
    ```jsx theme={null}
    import { IconAddressBook } from 'twenty-ui/display';

    export const MyComponent = () => {
      return <IconAddressBook size={24} stroke={2} />;
    };
    ```
  </Tab>

  <Tab title="プロパティ">
    | プロパティ | タイプ | 説明                  | デフォルト |
    | ----- | --- | ------------------- | ----- |
    | サイズ   | 数   | アイコンの高さと幅（ピクセル単位）   | 24    |
    | ストローク | 数   | アイコンのストローク幅（ピクセル単位） | 2     |
  </Tab>
</Tabs>