---
name: "icon"
mode: "component"
versionRequirements:
  - { name: "基础库", version: "2.10.0" }
title: "icon - 图标"
---

## icon

> [VERSION] 基础库 >= 2.10.0

### 描述

图标组件。

### 属性

| 属性 | 类型 | 必填 | 默认值 | 描述 |
| --- | --- | --- | --- | --- |
| `type` | `string` | 是 | `""` | 图标类型 |
| `size` | `number` | 否 | `0` | 图标大小，单位 px |
| `color` | `string` | 否 | `""` | 图标颜色，同 CSS color |

### 示例代码

#### 内置图标类型

*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({});
```

#### 自定义大小与颜色

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

<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="zh">
</DemoBlock>