diff --git a/src/swipe-cell/README.en-US.md b/src/swipe-cell/README.en-US.md
index eb95d5360..13971c3bd 100644
--- a/src/swipe-cell/README.en-US.md
+++ b/src/swipe-cell/README.en-US.md
@@ -10,7 +10,7 @@ custom-style | String | - | \- | N
 disabled | Boolean | - | \- | N
 opened   | Boolean / Array | false  | \- | N
 left | Array / Slot | - | Typescript：`Array<SwipeActionItem>` | N
-right | Array / Slot | - | Typescript：`Array<SwipeActionItem>` `interface SwipeActionItem {text: string; className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N
+right | Array / Slot | - | Typescript：`Array<SwipeActionItem>` `interface SwipeActionItem {text?: string; icon?: string | object; className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N
 
 ### SwipeCell Events
 
diff --git a/src/swipe-cell/README.md b/src/swipe-cell/README.md
index 79b24253a..01e653211 100644
--- a/src/swipe-cell/README.md
+++ b/src/swipe-cell/README.md
@@ -16,18 +16,24 @@ isComponent: true
 }
 ```
 
-## 代码演示
+### 组件类型
 
-<img src="https://tdesign.gtimg.com/miniprogram/readme/swipeout-1.png" width="375px" height="50%">
-
-### 往左滑动
+左滑单操作
 
 {{ left }}
 
-### 往右滑动
+右滑单操作
 
 {{ right }}
 
+左右滑操作
+
+{{ double }}
+
+带图标的滑动操作
+
+{{ icon }}
+
 ## API
 ### SwipeCell Props
 
@@ -37,7 +43,7 @@ custom-style | String | - | 自定义组件样式 | N
 disabled | Boolean | - | 是否禁用滑动 | N
 opened   | Boolean / Array | false  | 操作项是否呈现为打开态，值为数组时表示分别控制左右滑动的展开和收起状态。TS 类型：`boolean| Array<boolean>` | N   |
 left | Array / Slot | - | 左侧滑动操作项。所有行为同 `right`。TS 类型：`Array<SwipeActionItem>` | N
-right | Array / Slot | - | 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', style: 'background-color: red', onClick: () => {} }]`。TS 类型：`Array<SwipeActionItem>` `interface SwipeActionItem {text: string; className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N
+right | Array / Slot | - | 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', icon: 'delete', style: 'background-color: red', onClick: () => {} }]`。TS 类型：`Array<SwipeActionItem>` `interface SwipeActionItem {text?: string; icon?: string | object, className?: string; style?: string; onClick?: () => void; [key: string]: any }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/swipe-cell/type.ts) | N
 
 ### SwipeCell Events
 
diff --git a/src/swipe-cell/__test__/__snapshots__/demo.test.js.snap b/src/swipe-cell/__test__/__snapshots__/demo.test.js.snap
index af91202ff..cefc0aee6 100644
--- a/src/swipe-cell/__test__/__snapshots__/demo.test.js.snap
+++ b/src/swipe-cell/__test__/__snapshots__/demo.test.js.snap
@@ -1,32 +1,54 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SwipeCell SwipeCell left demo works fine 1`] = `
-<left>
+exports[`SwipeCell SwipeCell double demo works fine 1`] = `
+<double>
   <t-swipe-cell
-    tClass="test-class-123"
+    left="{{
+      Array [
+        Object {
+          "className": "btn favor-btn",
+          "text": "选择",
+        },
+      ]
+    }}"
+    right="{{
+      Array [
+        Object {
+          "className": "btn delete-btn",
+          "text": "删除",
+        },
+      ]
+    }}"
+    bind:click="onActionClick"
   >
     <t-cell
       bordered="{{false}}"
       note="辅助信息"
-      title="列表-左滑单操作"
+      title="左右滑操作"
     />
-    <wx-view
-      class="t-swipe-cell-demo-btn delete-btn"
-      slot="right"
-      bind:tap="onDelete"
-    >
-      删除
-    </wx-view>
   </t-swipe-cell>
+</double>
+`;
+
+exports[`SwipeCell SwipeCell icon demo works fine 1`] = `
+<wx-icon>
   <t-swipe-cell
     right="{{
       Array [
         Object {
-          "className": "t-swipe-cell-demo-btn edit-btn",
+          "className": "btn edit-btn",
+          "icon": Object {
+            "name": "edit",
+            "size": 16,
+          },
           "text": "编辑",
         },
         Object {
-          "className": "t-swipe-cell-demo-btn delete-btn",
+          "className": "btn delete-btn",
+          "icon": Object {
+            "name": "delete",
+            "size": 16,
+          },
           "text": "删除",
         },
       ]
@@ -35,56 +57,156 @@ exports[`SwipeCell SwipeCell left demo works fine 1`] = `
   >
     <t-cell
       bordered="{{false}}"
-      note="双操作"
-      title="列表-左滑双操作"
+      note="辅助信息"
+      title="左滑-带图标文本双操作"
+    />
+  </t-swipe-cell>
+  <t-swipe-cell
+    right="{{
+      Array [
+        Object {
+          "className": "btn edit-btn",
+          "icon": "edit",
+        },
+        Object {
+          "className": "btn delete-btn",
+          "icon": "delete",
+        },
+      ]
+    }}"
+  >
+    <t-cell
+      bordered="{{false}}"
+      note="辅助信息"
+      title="左滑-仅带图标双操作"
     />
   </t-swipe-cell>
   <t-swipe-cell>
     <t-cell
       bordered="{{false}}"
-      note="多操作"
-      title="列表-左滑多操作"
+      description="一段很长很长的内容文字"
+      image="https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-ui/components-exp/placeholder/quartet.svg"
+      note="辅助信息"
+      title="左滑大列表-仅带图标双操作"
     />
     <wx-view
-      class="t-swipe-cell-demo-btn-wrapper"
+      class="btn-wrapper"
       slot="right"
     >
       <wx-view
-        class="t-swipe-cell-demo-btn favor-btn"
-        bind:tap="onFavor"
-      >
-        收藏
-      </wx-view>
-      <wx-view
-        class="t-swipe-cell-demo-btn edit-btn"
+        class="btn edit-btn column"
         bind:tap="onEdit"
       >
-        编辑
+        <t-icon
+          class="padding-bottom"
+          name="edit"
+          size="32rpx"
+        />
+        
+      编辑
+    
       </wx-view>
       <wx-view
-        class="t-swipe-cell-demo-btn delete-btn"
+        class="btn delete-btn column"
         bind:tap="onDelete"
       >
-        删除
+        <t-icon
+          class="padding-bottom"
+          name="delete"
+          size="32rpx"
+        />
+        
+      删除
+    
       </wx-view>
     </wx-view>
   </t-swipe-cell>
+</wx-icon>
+`;
+
+exports[`SwipeCell SwipeCell left demo works fine 1`] = `
+<left>
   <t-swipe-cell>
     <t-cell
       bordered="{{false}}"
-      description="一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字"
+      note="辅助信息"
+      title="左滑单操作"
+    />
+    <wx-view
+      class="btn delete-btn"
+      slot="right"
+      bind:tap="onDelete"
+    >
+      删除
+    </wx-view>
+  </t-swipe-cell>
+  <t-swipe-cell>
+    <t-cell
+      bordered="{{false}}"
+      description="一段很长很长的内容文字"
       image="https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-ui/components-exp/placeholder/quartet.svg"
-      tClassImage="title-image-large"
+      note="辅助信息"
       title="左滑大列表"
     />
     <wx-view
-      class="t-swipe-cell-demo-btn delete-btn"
+      class="btn delete-btn"
       slot="right"
       bind:tap="onDelete"
     >
       删除
     </wx-view>
   </t-swipe-cell>
+  <t-swipe-cell
+    right="{{
+      Array [
+        Object {
+          "className": "btn edit-btn",
+          "text": "编辑",
+        },
+        Object {
+          "className": "btn delete-btn",
+          "text": "删除",
+        },
+      ]
+    }}"
+    bind:click="onActionClick"
+  >
+    <t-cell
+      bordered="{{false}}"
+      note="辅助信息"
+      title="左滑双操作"
+    />
+  </t-swipe-cell>
+  <t-swipe-cell>
+    <t-cell
+      bordered="{{false}}"
+      note="辅助信息"
+      title="左滑多操作"
+    />
+    <wx-view
+      class="btn-wrapper"
+      slot="right"
+    >
+      <wx-view
+        class="btn favor-btn"
+        bind:tap="onFavor"
+      >
+        收藏
+      </wx-view>
+      <wx-view
+        class="btn edit-btn"
+        bind:tap="onEdit"
+      >
+        编辑
+      </wx-view>
+      <wx-view
+        class="btn delete-btn"
+        bind:tap="onDelete"
+      >
+        删除
+      </wx-view>
+    </wx-view>
+  </t-swipe-cell>
 </left>
 `;
 
@@ -94,10 +216,10 @@ exports[`SwipeCell SwipeCell right demo works fine 1`] = `
     <t-cell
       bordered="{{false}}"
       note="辅助信息"
-      title="列表-右滑单操作"
+      title="右滑单操作"
     />
     <wx-view
-      class="t-swipe-cell-demo-btn favor-btn"
+      class="btn favor-btn"
       slot="left"
       bind:tap="onChoice"
     >
diff --git a/src/swipe-cell/__test__/demo.test.js b/src/swipe-cell/__test__/demo.test.js
index 4816e3d08..ceff5a156 100644
--- a/src/swipe-cell/__test__/demo.test.js
+++ b/src/swipe-cell/__test__/demo.test.js
@@ -5,7 +5,7 @@
 import simulate from 'miniprogram-simulate';
 import path from 'path';
 
-const mapper = ['left', 'right'];
+const mapper = ['double', 'icon', 'left', 'right'];
 
 describe('SwipeCell', () => {
   mapper.forEach((demoName) => {
diff --git a/src/swipe-cell/_example/double/index.js b/src/swipe-cell/_example/double/index.js
new file mode 100644
index 000000000..19500eab2
--- /dev/null
+++ b/src/swipe-cell/_example/double/index.js
@@ -0,0 +1,22 @@
+Component({
+  data: {
+    right: [
+      {
+        text: '删除',
+        className: 'btn delete-btn',
+      },
+    ],
+    left: [
+      {
+        text: '选择',
+        className: 'btn favor-btn',
+      },
+    ],
+  },
+
+  methods: {
+    onActionClick({ detail }) {
+      wx.showToast({ title: `你点击了${detail.text}`, icon: 'none' });
+    },
+  },
+});
diff --git a/src/swipe-cell/_example/double/index.json b/src/swipe-cell/_example/double/index.json
new file mode 100644
index 000000000..e3c826764
--- /dev/null
+++ b/src/swipe-cell/_example/double/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-swipe-cell": "tdesign-miniprogram/swipe-cell/swipe-cell"
+  }
+}
diff --git a/src/swipe-cell/_example/double/index.wxml b/src/swipe-cell/_example/double/index.wxml
new file mode 100644
index 000000000..e35d6f5ad
--- /dev/null
+++ b/src/swipe-cell/_example/double/index.wxml
@@ -0,0 +1,3 @@
+<t-swipe-cell right="{{right}}" left="{{left}}" bind:click="onActionClick">
+  <t-cell title="左右滑操作" note="辅助信息" bordered="{{false}}" />
+</t-swipe-cell>
diff --git a/src/swipe-cell/_example/double/index.wxss b/src/swipe-cell/_example/double/index.wxss
new file mode 100644
index 000000000..da4a239fd
--- /dev/null
+++ b/src/swipe-cell/_example/double/index.wxss
@@ -0,0 +1,16 @@
+.btn {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 120rpx;
+  height: 100%;
+  color: white;
+}
+
+.favor-btn {
+  background-color: #0052d9;
+}
+
+.delete-btn {
+  background-color: #e34d59;
+}
diff --git a/src/swipe-cell/_example/icon/index.js b/src/swipe-cell/_example/icon/index.js
new file mode 100644
index 000000000..8aecbdf14
--- /dev/null
+++ b/src/swipe-cell/_example/icon/index.js
@@ -0,0 +1,50 @@
+Component({
+  data: {
+    right: [
+      {
+        text: '编辑',
+        icon: {
+          name: 'edit',
+          size: 16,
+        },
+        className: 'btn edit-btn',
+      },
+      {
+        text: '删除',
+        icon: {
+          name: 'delete',
+          size: 16,
+        },
+        className: 'btn delete-btn',
+      },
+    ],
+    rightIcon: [
+      {
+        icon: 'edit',
+        className: 'btn edit-btn',
+      },
+      {
+        icon: 'delete',
+        className: 'btn delete-btn',
+      },
+    ],
+  },
+  methods: {
+    onActionClick({ detail }) {
+      wx.showToast({ title: `你点击了${detail.text}`, icon: 'none' });
+    },
+
+    onDelete() {
+      wx.showToast({ title: '你点击了删除', icon: 'none' });
+    },
+    onEdit() {
+      wx.showToast({ title: '你点击了编辑', icon: 'none' });
+    },
+    onFavor() {
+      wx.showToast({ title: '你点击了收藏', icon: 'none' });
+    },
+    onChoice() {
+      wx.showToast({ title: '你点击了选择', icon: 'none' });
+    },
+  },
+});
diff --git a/src/swipe-cell/_example/icon/index.json b/src/swipe-cell/_example/icon/index.json
new file mode 100644
index 000000000..e3c826764
--- /dev/null
+++ b/src/swipe-cell/_example/icon/index.json
@@ -0,0 +1,7 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-cell": "tdesign-miniprogram/cell/cell",
+    "t-swipe-cell": "tdesign-miniprogram/swipe-cell/swipe-cell"
+  }
+}
diff --git a/src/swipe-cell/_example/icon/index.wxml b/src/swipe-cell/_example/icon/index.wxml
new file mode 100644
index 000000000..57f96b5dc
--- /dev/null
+++ b/src/swipe-cell/_example/icon/index.wxml
@@ -0,0 +1,27 @@
+<t-swipe-cell right="{{right}}" bind:click="onActionClick">
+  <t-cell title="左滑-带图标文本双操作" note="辅助信息" bordered="{{false}}" />
+</t-swipe-cell>
+
+<t-swipe-cell right="{{rightIcon}}">
+  <t-cell title="左滑-仅带图标双操作" note="辅助信息" bordered="{{false}}" />
+</t-swipe-cell>
+
+<t-swipe-cell>
+  <t-cell
+    bordered="{{false}}"
+    title="左滑大列表-仅带图标双操作"
+    description="一段很长很长的内容文字"
+    note="辅助信息"
+    image="https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-ui/components-exp/placeholder/quartet.svg"
+  />
+  <view slot="right" class="btn-wrapper">
+    <view class="btn edit-btn column" bind:tap="onEdit">
+      <t-icon class="padding-bottom" name="edit" size="32rpx"></t-icon>
+      编辑
+    </view>
+    <view class="btn delete-btn column" bind:tap="onDelete">
+      <t-icon class="padding-bottom" name="delete" size="32rpx"></t-icon>
+      删除
+    </view>
+  </view>
+</t-swipe-cell>
diff --git a/src/swipe-cell/_example/icon/index.wxss b/src/swipe-cell/_example/icon/index.wxss
new file mode 100644
index 000000000..4f079fef1
--- /dev/null
+++ b/src/swipe-cell/_example/icon/index.wxss
@@ -0,0 +1,32 @@
+.btn-wrapper {
+  height: 100%;
+}
+
+.btn {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: 120rpx;
+  height: 100%;
+  color: white;
+}
+
+.delete-btn {
+  background-color: #e34d59;
+}
+
+.edit-btn {
+  background-color: #ed7b2f;
+}
+
+.favor-btn {
+  background-color: #0052d9;
+}
+
+.column {
+  flex-direction: column;
+}
+
+.padding-bottom {
+  padding-bottom: 8rpx;
+}
diff --git a/src/swipe-cell/_example/left/index.js b/src/swipe-cell/_example/left/index.js
index 2de1dc52e..786736b9f 100644
--- a/src/swipe-cell/_example/left/index.js
+++ b/src/swipe-cell/_example/left/index.js
@@ -3,11 +3,11 @@ Component({
     right: [
       {
         text: '编辑',
-        className: 't-swipe-cell-demo-btn edit-btn',
+        className: 'btn edit-btn',
       },
       {
         text: '删除',
-        className: 't-swipe-cell-demo-btn delete-btn',
+        className: 'btn delete-btn',
       },
     ],
   },
diff --git a/src/swipe-cell/_example/left/index.wxml b/src/swipe-cell/_example/left/index.wxml
index 8f3a895b2..9a658606e 100644
--- a/src/swipe-cell/_example/left/index.wxml
+++ b/src/swipe-cell/_example/left/index.wxml
@@ -1,28 +1,28 @@
-<t-swipe-cell t-class="test-class-123">
-  <t-cell title="列表-左滑单操作" note="辅助信息" bordered="{{false}}" />
-  <view slot="right" class="t-swipe-cell-demo-btn delete-btn" bind:tap="onDelete">删除</view>
-</t-swipe-cell>
-
-<t-swipe-cell right="{{right}}" bind:click="onActionClick">
-  <t-cell title="列表-左滑双操作" note="双操作" bordered="{{false}}" />
-</t-swipe-cell>
-
 <t-swipe-cell>
-  <t-cell title="列表-左滑多操作" note="多操作" bordered="{{false}}" />
-  <view slot="right" class="t-swipe-cell-demo-btn-wrapper">
-    <view class="t-swipe-cell-demo-btn favor-btn" bind:tap="onFavor">收藏</view>
-    <view class="t-swipe-cell-demo-btn edit-btn" bind:tap="onEdit">编辑</view>
-    <view class="t-swipe-cell-demo-btn delete-btn" bind:tap="onDelete">删除</view>
-  </view>
+  <t-cell title="左滑单操作" note="辅助信息" bordered="{{false}}" />
+  <view slot="right" class="btn delete-btn" bind:tap="onDelete">删除</view>
 </t-swipe-cell>
 
 <t-swipe-cell>
   <t-cell
     bordered="{{false}}"
     title="左滑大列表"
-    description="一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字"
-    t-class-image="title-image-large"
+    description="一段很长很长的内容文字"
+    note="辅助信息"
     image="https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-ui/components-exp/placeholder/quartet.svg"
   />
-  <view slot="right" class="t-swipe-cell-demo-btn delete-btn" bind:tap="onDelete">删除</view>
+  <view slot="right" class="btn delete-btn" bind:tap="onDelete">删除</view>
+</t-swipe-cell>
+
+<t-swipe-cell right="{{right}}" bind:click="onActionClick">
+  <t-cell title="左滑双操作" note="辅助信息" bordered="{{false}}" />
+</t-swipe-cell>
+
+<t-swipe-cell>
+  <t-cell title="左滑多操作" note="辅助信息" bordered="{{false}}" />
+  <view slot="right" class="btn-wrapper">
+    <view class="btn favor-btn" bind:tap="onFavor">收藏</view>
+    <view class="btn edit-btn" bind:tap="onEdit">编辑</view>
+    <view class="btn delete-btn" bind:tap="onDelete">删除</view>
+  </view>
 </t-swipe-cell>
diff --git a/src/swipe-cell/_example/left/index.wxss b/src/swipe-cell/_example/left/index.wxss
index 8733c5f52..6e657b951 100644
--- a/src/swipe-cell/_example/left/index.wxss
+++ b/src/swipe-cell/_example/left/index.wxss
@@ -1,31 +1,24 @@
-.t-swipe-cell-demo-btn-wrapper {
+.btn-wrapper {
   height: 100%;
 }
 
-.t-swipe-cell-demo-btn {
+.btn {
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  width: 144rpx !important;
+  width: 120rpx;
   height: 100%;
-  text-align: center;
   color: white;
 }
 
-.t-swipe-cell-demo-btn.delete-btn {
+.delete-btn {
   background-color: #e34d59;
 }
 
-.t-swipe-cell-demo-btn.edit-btn {
+.edit-btn {
   background-color: #ed7b2f;
 }
 
-.t-swipe-cell-demo-btn.favor-btn {
+.favor-btn {
   background-color: #0052d9;
 }
-
-.title-image-large {
-  margin-right: 8rpx;
-  width: 144rpx;
-  height: 144rpx;
-}
diff --git a/src/swipe-cell/_example/right/index.wxml b/src/swipe-cell/_example/right/index.wxml
index 3cab2bcfa..558250d83 100644
--- a/src/swipe-cell/_example/right/index.wxml
+++ b/src/swipe-cell/_example/right/index.wxml
@@ -1,4 +1,4 @@
 <t-swipe-cell>
-  <t-cell title="列表-右滑单操作" note="辅助信息" bordered="{{false}}" />
-  <view slot="left" class="t-swipe-cell-demo-btn favor-btn" bind:tap="onChoice">选择</view>
+  <t-cell title="右滑单操作" note="辅助信息" bordered="{{false}}" />
+  <view slot="left" class="btn favor-btn" bind:tap="onChoice">选择</view>
 </t-swipe-cell>
diff --git a/src/swipe-cell/_example/right/index.wxss b/src/swipe-cell/_example/right/index.wxss
index a6e7d764d..3cbb6609f 100644
--- a/src/swipe-cell/_example/right/index.wxss
+++ b/src/swipe-cell/_example/right/index.wxss
@@ -1,13 +1,12 @@
-.t-swipe-cell-demo-btn {
+.btn {
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  width: 144rpx;
+  width: 120rpx;
   height: 100%;
-  text-align: center;
   color: white;
 }
 
-.t-swipe-cell-demo-btn.favor-btn {
+.favor-btn {
   background-color: #0052d9;
 }
diff --git a/src/swipe-cell/_example/swipe-cell.json b/src/swipe-cell/_example/swipe-cell.json
index 405792ad8..891b6f1c8 100644
--- a/src/swipe-cell/_example/swipe-cell.json
+++ b/src/swipe-cell/_example/swipe-cell.json
@@ -5,6 +5,8 @@
   "backgroundColorBottom": "#f9f9f9",
   "usingComponents": {
     "left": "./left",
-    "right": "./right"
+    "right": "./right",
+    "double": "./double",
+    "iconDemo": "./icon"
   }
 }
diff --git a/src/swipe-cell/_example/swipe-cell.less b/src/swipe-cell/_example/swipe-cell.less
index e99ebfa67..993f30982 100644
--- a/src/swipe-cell/_example/swipe-cell.less
+++ b/src/swipe-cell/_example/swipe-cell.less
@@ -2,24 +2,19 @@ page {
   background: #f9f9f9;
 }
 
-.t-swipe-cell-demo-btn {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  width: 144rpx;
+.btn {
   height: 100%;
-  text-align: center;
   color: white;
 }
 
-.t-swipe-cell-demo-btn.delete-btn {
+.delete-btn {
   background-color: #e34d59;
 }
 
-.t-swipe-cell-demo-btn.edit-btn {
+.edit-btn {
   background-color: #ed7b2f;
 }
 
-.t-swipe-cell {
-  margin-bottom: 32rpx;
+.favor-btn {
+  background-color: #0052d9;
 }
diff --git a/src/swipe-cell/_example/swipe-cell.wxml b/src/swipe-cell/_example/swipe-cell.wxml
index 59921840b..dce112c09 100644
--- a/src/swipe-cell/_example/swipe-cell.wxml
+++ b/src/swipe-cell/_example/swipe-cell.wxml
@@ -1,11 +1,16 @@
 <view class="demo">
   <view class="demo-title">SwipeCell 滑动操作</view>
   <view class="demo-desc">用于承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。</view>
-  <t-demo title="01 类型" desc="左右滑动操作各列表样式"> </t-demo>
-  <t-demo desc="往左滑动">
+  <t-demo title="01 组件类型" desc="左滑单操作">
     <left />
   </t-demo>
-  <t-demo desc="往右滑动">
+  <t-demo desc="右滑单操作">
     <right />
   </t-demo>
+  <t-demo desc="左右滑操作">
+    <double />
+  </t-demo>
+  <t-demo desc="带图标的滑动操作">
+    <iconDemo />
+  </t-demo>
 </view>
diff --git a/src/swipe-cell/swipe-cell.json b/src/swipe-cell/swipe-cell.json
index 467ce2945..049940c16 100644
--- a/src/swipe-cell/swipe-cell.json
+++ b/src/swipe-cell/swipe-cell.json
@@ -1,3 +1,6 @@
 {
-  "component": true
+  "component": true,
+  "usingComponents": {
+    "t-icon": "../icon/icon"
+  }
 }
diff --git a/src/swipe-cell/swipe-cell.less b/src/swipe-cell/swipe-cell.less
index 04619fd87..6c8048559 100644
--- a/src/swipe-cell/swipe-cell.less
+++ b/src/swipe-cell/swipe-cell.less
@@ -1,4 +1,3 @@
-// @import (css) '../common/index.wxss';
 @import '../common/style/index.less';
 
 .@{prefix}-swipe-cell {
@@ -21,4 +20,21 @@
     right: 0;
     transform: translate3d(100%, 0, 0);
   }
+
+  &__content {
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    padding: 0 @spacer-2;
+  }
+
+  &__icon {
+    font-size: @font-size-l;
+  }
+
+  &__icon + &__text:not(:empty) {
+    margin-left: @spacer;
+    font-size: @font-size-base;
+    line-height: 44rpx;
+  }
 }
diff --git a/src/swipe-cell/swipe-cell.wxml b/src/swipe-cell/swipe-cell.wxml
index 170fbf686..bdc843551 100644
--- a/src/swipe-cell/swipe-cell.wxml
+++ b/src/swipe-cell/swipe-cell.wxml
@@ -1,4 +1,6 @@
+<import src="../common/template/icon.wxml" />
 <wxs src="./swipe-cell.wxs" module="swipe"></wxs>
+
 <view
   class="{{prefix}}-class {{classPrefix}}"
   data-key="cell"
@@ -19,13 +21,18 @@
       <slot name="left" />
       <view
         wx:for="{{left}}"
-        class="{{item.className}}"
+        class="{{classPrefix}}__content {{item.className}}"
         style="{{item.style}}"
         wx:key="index"
         data-action="{{item}}"
         bind:tap="onActionTap"
       >
-        {{item.text}}
+        <template
+          wx:if="{{item.icon}}"
+          is="icon"
+          data="{{class: classPrefix + '__icon', name: item.icon, ...item.icon}}"
+        ></template>
+        <text wx:if="{{item.text}}" class="{{classPrefix}}__text">{{item.text}}</text>
       </view>
     </view>
     <slot />
@@ -33,13 +40,18 @@
       <slot name="right" />
       <view
         wx:for="{{right}}"
-        class="{{item.className}}"
+        class="{{classPrefix}}__content {{item.className}}"
         style="{{item.style}}"
         wx:key="index"
         data-action="{{item}}"
         bind:tap="onActionTap"
       >
-        {{item.text}}
+        <template
+          wx:if="{{item.icon}}"
+          is="icon"
+          data="{{class: classPrefix + '__icon', name: item.icon, ...item.icon}}"
+        ></template>
+        <text wx:if="{{item.text}}" class="{{classPrefix}}__text">{{item.text}}</text>
       </view>
     </view>
   </view>