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

앱 전반에 걸쳐 사용되는 아이콘 목록입니다.

## 타블러 아이콘

앱 전반에 걸쳐 React에 타블러 아이콘을 사용합니다.

<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           |
    | 색상   | 문자열 | 아이콘의 색상            | currentColor |
    | 스트로크 | 숫자  | 픽셀 단위의 아이콘 스트로크 너비 | 2            |
  </Tab>
</Tabs>

## 커스텀 아이콘

타블러 아이콘 외에도 앱에는 일부 커스텀 아이콘이 사용됩니다.

### 아이콘 주소록

주소록 아이콘을 표시합니다.

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