> ## 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图标

我们在整个应用程序中使用了React的Tabler图标。

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