twenty/packages/twenty-docs/l/tr/twenty-ui/display/icons.mdx

---
title: İkonlar
icon: ikonlar
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Başlık" />
</Frame>

Uygulamamız genelinde kullanılan simgelerin listesi.

## Tabler Icons

Uygulama genelinde React için Tabler simgelerini kullanıyoruz.

<Tabs>

<Tab title="Kurulum">
<br />

```
yarn add @tabler/icons-react
```

</Tab>

<Tab title="Özellikler">

Her bir ikonu bir bileşen olarak içe aktarabilirsiniz. İşte bir örnek:
<br />

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

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

</Tab>

<Tab title="Özellikler">


| Özellikler | Tür   | Açıklama                                  | Varsayılan   |
| ---------- | ----- | ----------------------------------------- | ------------ |
| boyut      | sayı  | İkonun piksel cinsinden boyu ve genişliği | 24           |
| renk       | metin | İkonların rengi                           | currentColor |
| kontur     | sayı  | İkonun piksel cinsinden kontur kalınlığı  | 2            |



</Tab>

</Tabs>

## Özel İkonlar

Tabler simgelerine ek olarak, uygulama bazı özel simgeler de kullanır.

### İkon Adres Defteri

Bir adres defteri simgesini gösterir.

<Tabs>

<Tab title="Kullanım">

```jsx
import { IconAddressBook } from 'twenty-ui/display';

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

</Tab>

<Tab title="Özellikler">


| Özellikler | Tür  | Açıklama                                  | Varsayılan |
| ---------- | ---- | ----------------------------------------- | ---------- |
| boyut      | sayı | İkonun piksel cinsinden boyu ve genişliği | 24         |
| kontur     | sayı | İkonun piksel cinsinden kontur kalınlığı  | 2          |



</Tab>

</Tabs>