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

# Icon Component

> Icon component reference. Learn how to select YiDA's built-in icons and configure their sizes to add intuitive visual cues to your pages.

Display icons. You can use YiDA's built-in icons and adjust their sizes.

## When to Use

Use icons to display markers such as warnings, tips, trends, and more.

## Component Example

## Custom Icon Usage

### 1. Go to <a href="https://www.iconfont.cn/">iconfont</a>

### 2. Add your preferred icons to the cart. Then open the cart and add the icons to a new project (creating a new project is recommended).

### 3. Select Symbol, view the online link, and copy the code into YiDA. Example:

```
 //at.alicdn.com/t/font_3429645_pimqzpqqzps.js
```

### 4. Copy the icon's name into YiDA. Example:

```
 icon-liebiao
```

## Component Properties

| Attribute   | Description                                                                                                            | Type                                                                        | Default    |
| ----------- | ---------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------- | ---------- |
| `baseType`  | Basic icon. Corresponds only to the text under the icon in the example above.                                          | `string`                                                                    | `'smile'`  |
| `otherType` | Custom icon                                                                                                            | `string`                                                                    | `'smile'`  |
| `size`      | Icon size                                                                                                              | `'xxs' \| 'xs' \| 'small' \| 'medium' \| 'large' \| 'xl' \|'xxl' \| 'xxxl'` | `'medium'` |
| `useType`   | Icon usage type. If true, the **otherType** attribute takes effect; if false, the **baseType** attribute takes effect. | `boolean`                                                                   | `false`    |