---
name: "icon"
mode: "component"
versionRequirements:
  - { name: "Base Library", version: "2.10.0" }
title: "icon - Icon"
---

## icon

> [VERSION] Base Library >= 2.10.0

### Description

Icon component.

### Props

| Property | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `type` | `string` | Yes | `""` | Icon type |
| `size` | `number` | No | `0` | Icon size, in px |
| `color` | `string` | No | `""` | Icon color, same as CSS color |

### Examples

#### Built-in icon types

*index.tyml*

```xml
<view class="icon-list">
  <view class="icon-item">
    <icon type="success" size="{{40}}" />
    <text>success</text>
  </view>
  <view class="icon-item">
    <icon type="success_no_circle" size="{{40}}" />
    <text>success_no_circle</text>
  </view>
  <view class="icon-item">
    <icon type="info" size="{{40}}" />
    <text>info</text>
  </view>
  <view class="icon-item">
    <icon type="warn" size="{{40}}" />
    <text>warn</text>
  </view>
  <view class="icon-item">
    <icon type="waiting" size="{{40}}" />
    <text>waiting</text>
  </view>
</view>
```

*index.tyss*

```css
.icon-list { display: flex; flex-wrap: wrap; padding: 20rpx; }
.icon-item { display: flex; flex-direction: column; align-items: center; width: 150rpx; margin: 20rpx; }
.icon-item text { font-size: 22rpx; margin-top: 10rpx; color: #666; }
```

*index.js*

```javascript
Page({});
```

#### Custom size and color

*index.tyml*

```xml
<view class="icon-row">
  <icon type="success" size="{{20}}" />
  <icon type="success" size="{{30}}" />
  <icon type="success" size="{{40}}" />
  <icon type="success" size="{{50}}" color="#52c41a" />
</view>
<view class="icon-row">
  <icon type="info" size="{{40}}" color="#1890ff" />
  <icon type="warn" size="{{40}}" color="#faad14" />
  <icon type="cancel" size="{{40}}" color="#ff4d4f" />
</view>
```

*index.tyss*

```css
.icon-row { display: flex; align-items: center; gap: 30rpx; padding: 20rpx; }
```

*index.js*

```javascript
Page({});
```


## type values

<Image src="/images/component/icons1.png" width="375"/>


<DemoBlock 
  githubUrl="https://github.com/Tuya-Community/tuya-miniapp-demo/tree/master/icon" 
  qrCodeUrl="/images/qrCode/icon.png" 
  lang="en">
</DemoBlock>