diff --git a/migrate-from-v2.md b/migrate-from-v2.md
index 5bd3f8ec5e..3174027104 100644
--- a/migrate-from-v2.md
+++ b/migrate-from-v2.md
@@ -616,6 +616,8 @@ plugins: [
 - 移除 `isAsync`，通过 `checked`实现
 - 移除 `activeColor` ，通过css变量`--nutui-switch-open-background-color`实现
 - 移除 `inactiveColor`，通过css变量`--nutui-switch-close-background-color`实现
+- `activeText 属性类型更改为 `ReactNode`
+- `inactiveText` 属性类型更改为 `ReactNode`
 
 #### Toast
 
diff --git a/src/config.json b/src/config.json
index 1ba789e265..b4d4549550 100644
--- a/src/config.json
+++ b/src/config.json
@@ -673,6 +673,7 @@
           "sort": 11,
           "show": true,
           "taro": true,
+          "v14": true,
           "author": "dsj"
         },
         {
diff --git a/src/packages/switch/__test__/switch.spec.tsx b/src/packages/switch/__test__/switch.spec.tsx
index e7c152cf93..37d1f0b62f 100644
--- a/src/packages/switch/__test__/switch.spec.tsx
+++ b/src/packages/switch/__test__/switch.spec.tsx
@@ -9,7 +9,10 @@ test('activeText && checked && onChange && inactiveText && className && style te
     inactiveText: '关',
     checked: false,
     className: 'switch-test',
-    style: { fontSize: '12px', '--nutui-switch-open-background-color': 'blue' },
+    style: {
+      fontSize: '12px',
+      '--nutui-switch-active-background-color': 'blue',
+    },
   }
   const { activeText, inactiveText, className, style } = state
   const testFn = vi.fn()
@@ -28,11 +31,11 @@ test('activeText && checked && onChange && inactiveText && className && style te
   if (el) {
     expect(el).toHaveAttribute(
       'class',
-      `nut-switch nut-switch-close  nut-switch-base switch-test`
+      `nut-switch nut-switch-inactive  nut-switch-base switch-test`
     )
     expect(el).toHaveAttribute(
       'style',
-      `font-size: 12px; --nutui-switch-open-background-color: blue;`
+      `font-size: 12px; --nutui-switch-active-background-color: blue;`
     )
     expect(el).toHaveTextContent(inactiveText)
     await act(() => {
diff --git a/src/packages/switch/demo.taro.tsx b/src/packages/switch/demo.taro.tsx
index 423b4968bb..ac961c8b0d 100644
--- a/src/packages/switch/demo.taro.tsx
+++ b/src/packages/switch/demo.taro.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { ScrollView, View } from '@tarojs/components'
 import Taro from '@tarojs/taro'
-import { useTranslate } from '@/sites/assets/locale//taro'
+import { useTranslate } from '@/sites/assets/locale/taro'
 import Header from '@/sites/components/header'
 import Demo1 from './demos/taro/demo1'
 import Demo2 from './demos/taro/demo2'
@@ -9,6 +9,7 @@ import Demo3 from './demos/taro/demo3'
 import Demo4 from './demos/taro/demo4'
 import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
+import Demo7 from './demos/taro/demo7'
 
 const SwitchDemo = () => {
   const [translated] = useTranslate({
@@ -18,6 +19,7 @@ const SwitchDemo = () => {
       asyncControl: '受控',
       customColor: '自定义颜色',
       supportText: '支持文字',
+      supportIcon: '支持Icon',
       eventTip: '触发了 onChange 事件，开关状态：',
     },
     'zh-TW': {
@@ -26,6 +28,7 @@ const SwitchDemo = () => {
       asyncControl: '受控',
       customColor: '自定義顏色',
       supportText: '支持文字',
+      supportIcon: '支持Icon',
       eventTip: '觸發了 onChange 事件，開關狀態：',
     },
     'en-US': {
@@ -34,6 +37,7 @@ const SwitchDemo = () => {
       asyncControl: 'controlled',
       customColor: 'Custom Color',
       supportText: 'Support Text',
+      supportIcon: 'Support Icon',
       eventTip: 'Emit onChange event, current state:',
     },
   })
@@ -47,12 +51,14 @@ const SwitchDemo = () => {
         <Demo2 />
         <View className="h2">{translated.disabled}</View>
         <Demo3 />
-        <View className="h2">{translated.eventTip}</View>
+        <View className="h2">{translated.supportText}</View>
         <Demo4 />
-        <View className="h2">{translated.customColor}</View>
+        <View className="h2">{translated.supportIcon}</View>
         <Demo5 />
-        <View className="h2">{translated.supportText}</View>
+        <View className="h2">{translated.eventTip}</View>
         <Demo6 />
+        <View className="h2">{translated.customColor}</View>
+        <Demo7 />
       </ScrollView>
     </>
   )
diff --git a/src/packages/switch/demo.tsx b/src/packages/switch/demo.tsx
index 89e3addecf..7d33a634d2 100644
--- a/src/packages/switch/demo.tsx
+++ b/src/packages/switch/demo.tsx
@@ -6,6 +6,7 @@ import Demo3 from './demos/h5/demo3'
 import Demo4 from './demos/h5/demo4'
 import Demo5 from './demos/h5/demo5'
 import Demo6 from './demos/h5/demo6'
+import Demo7 from './demos/h5/demo7'
 
 const SwitchDemo = () => {
   const [translated] = useTranslate({
@@ -15,6 +16,7 @@ const SwitchDemo = () => {
       asyncControl: '受控',
       customColor: '自定义颜色',
       supportText: '支持文字',
+      supportIcon: '支持Icon',
       eventTip: '触发了 onChange 事件，开关状态：',
     },
     'zh-TW': {
@@ -23,6 +25,7 @@ const SwitchDemo = () => {
       asyncControl: '受控',
       customColor: '自定義顏色',
       supportText: '支持文字',
+      supportIcon: '支持Icon',
       eventTip: '觸發了 onChange 事件，開關狀態：',
     },
     'en-US': {
@@ -31,6 +34,7 @@ const SwitchDemo = () => {
       asyncControl: 'controlled',
       customColor: 'Custom Color',
       supportText: 'Support Text',
+      supportIcon: 'Support Icon',
       eventTip: 'Emit onChange event, current state:',
     },
   })
@@ -43,12 +47,14 @@ const SwitchDemo = () => {
         <Demo2 />
         <h2>{translated.disabled}</h2>
         <Demo3 />
-        <h2>{translated.eventTip}</h2>
+        <h2>{translated.supportText}</h2>
         <Demo4 />
-        <h2>{translated.customColor}</h2>
+        <h2>{translated.supportIcon}</h2>
         <Demo5 />
-        <h2>{translated.supportText}</h2>
+        <h2>{translated.eventTip}</h2>
         <Demo6 />
+        <h2>{translated.customColor}</h2>
+        <Demo7 />
       </div>
     </>
   )
diff --git a/src/packages/switch/demos/h5/demo3.tsx b/src/packages/switch/demos/h5/demo3.tsx
index 4de798d2f2..a216182953 100644
--- a/src/packages/switch/demos/h5/demo3.tsx
+++ b/src/packages/switch/demos/h5/demo3.tsx
@@ -1,10 +1,13 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react'
+import { Cell, Switch, Space } from '@nutui/nutui-react'
 
 const Demo3 = () => {
   return (
     <Cell>
-      <Switch defaultChecked disabled />
+      <Space>
+        <Switch defaultChecked disabled />
+        <Switch disabled />
+      </Space>
     </Cell>
   )
 }
diff --git a/src/packages/switch/demos/h5/demo4.tsx b/src/packages/switch/demos/h5/demo4.tsx
index f646c3c033..19a80215ae 100644
--- a/src/packages/switch/demos/h5/demo4.tsx
+++ b/src/packages/switch/demos/h5/demo4.tsx
@@ -1,16 +1,15 @@
 import React from 'react'
-import { Cell, Switch, Toast } from '@nutui/nutui-react'
+import { Cell, Switch, Space } from '@nutui/nutui-react'
 
 const Demo4 = () => {
-  const onChange = (value: boolean, event: any) => {
-    Toast.show(`触发了onChange事件，开关状态：${value}`)
-  }
   return (
     <Cell>
-      <Switch
-        defaultChecked
-        onChange={(value, event) => onChange(value, event)}
-      />
+      <Space>
+        <Switch defaultChecked activeText="开启" inactiveText="关闭" />
+        <Switch defaultChecked activeText="开" inactiveText="关" />
+        <Switch defaultChecked activeText="开启" inactiveText="关闭" disabled />
+        <Switch activeText="开启" inactiveText="关闭" disabled />
+      </Space>
     </Cell>
   )
 }
diff --git a/src/packages/switch/demos/h5/demo5.tsx b/src/packages/switch/demos/h5/demo5.tsx
index 0ff258eaea..d3907aa3f3 100644
--- a/src/packages/switch/demos/h5/demo5.tsx
+++ b/src/packages/switch/demos/h5/demo5.tsx
@@ -1,16 +1,24 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react'
+import { Cell, Space, Switch } from '@nutui/nutui-react'
+import { Check, Close } from '@nutui/icons-react'
 
 const Demo5 = () => {
   return (
     <Cell>
-      <Switch
-        defaultChecked
-        style={{
-          '--nutui-switch-open-background-color': 'blue',
-          '--nutui-switch-close-line-background-color': '#ebebeb',
-        }}
-      />
+      <Space>
+        <Switch
+          defaultChecked
+          activeText={<Check />}
+          inactiveText={<Close />}
+        />
+        <Switch
+          defaultChecked
+          activeText={<Check />}
+          inactiveText={<Close />}
+          disabled
+        />
+        <Switch activeText={<Check />} inactiveText={<Close />} disabled />
+      </Space>
     </Cell>
   )
 }
diff --git a/src/packages/switch/demos/h5/demo6.tsx b/src/packages/switch/demos/h5/demo6.tsx
index 09881801d2..0ac071af59 100644
--- a/src/packages/switch/demos/h5/demo6.tsx
+++ b/src/packages/switch/demos/h5/demo6.tsx
@@ -1,10 +1,16 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react'
+import { Cell, Switch, Toast } from '@nutui/nutui-react'
 
 const Demo6 = () => {
+  const onChange = (value: boolean, event: any) => {
+    Toast.show(`触发了onChange事件，开关状态：${value}`)
+  }
   return (
     <Cell>
-      <Switch defaultChecked activeText="开" inactiveText="关" />
+      <Switch
+        defaultChecked
+        onChange={(value, event) => onChange(value, event)}
+      />
     </Cell>
   )
 }
diff --git a/src/packages/switch/demos/h5/demo7.tsx b/src/packages/switch/demos/h5/demo7.tsx
new file mode 100644
index 0000000000..093c132550
--- /dev/null
+++ b/src/packages/switch/demos/h5/demo7.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Cell, Switch } from '@nutui/nutui-react'
+
+const Demo7 = () => {
+  return (
+    <Cell>
+      <Switch
+        defaultChecked
+        style={{
+          '--nutui-switch-active-background-color': 'blue',
+          '--nutui-switch-inactive-line-background-color': '#ebebeb',
+        }}
+      />
+    </Cell>
+  )
+}
+export default Demo7
diff --git a/src/packages/switch/demos/taro/demo2.tsx b/src/packages/switch/demos/taro/demo2.tsx
index a2f856042e..a6adf66282 100644
--- a/src/packages/switch/demos/taro/demo2.tsx
+++ b/src/packages/switch/demos/taro/demo2.tsx
@@ -1,23 +1,35 @@
 import React, { useState } from 'react'
-import { Cell, Switch } from '@nutui/nutui-react-taro'
-import Taro from '@tarojs/taro'
+import { Cell, Switch, Toast } from '@nutui/nutui-react-taro'
 
 const Demo2 = () => {
   const [checkedAsync, setCheckedAsync] = useState(true)
+  const [value, setValue] = useState(false)
+  const [showToast, setShowToast] = useState(false)
 
   const onChangeAsync = (value: boolean, event: any) => {
-    Taro.showToast({ title: `2秒后异步触发 ${value}` })
+    setValue(value)
+    setShowToast(true)
     setTimeout(() => {
       setCheckedAsync(value)
     }, 2000)
   }
   return (
-    <Cell>
-      <Switch
-        checked={checkedAsync}
-        onChange={(value, event) => onChangeAsync(value, event)}
+    <>
+      <Cell>
+        <Switch
+          checked={checkedAsync}
+          onChange={(value, event) => onChangeAsync(value, event)}
+        />
+      </Cell>
+      <Toast
+        type="text"
+        content={`2秒后异步触发 ${value}`}
+        visible={showToast}
+        onClose={() => {
+          setShowToast(false)
+        }}
       />
-    </Cell>
+    </>
   )
 }
 export default Demo2
diff --git a/src/packages/switch/demos/taro/demo3.tsx b/src/packages/switch/demos/taro/demo3.tsx
index 6cb94c6667..76e8d724c9 100644
--- a/src/packages/switch/demos/taro/demo3.tsx
+++ b/src/packages/switch/demos/taro/demo3.tsx
@@ -1,10 +1,13 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react-taro'
+import { Cell, Switch, Space } from '@nutui/nutui-react-taro'
 
 const Demo3 = () => {
   return (
     <Cell>
-      <Switch defaultChecked disabled />
+      <Space>
+        <Switch defaultChecked disabled />
+        <Switch disabled />
+      </Space>
     </Cell>
   )
 }
diff --git a/src/packages/switch/demos/taro/demo4.tsx b/src/packages/switch/demos/taro/demo4.tsx
index c779c6f803..e01ad5d9b8 100644
--- a/src/packages/switch/demos/taro/demo4.tsx
+++ b/src/packages/switch/demos/taro/demo4.tsx
@@ -1,20 +1,15 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react-taro'
-import Taro from '@tarojs/taro'
+import { Cell, Switch, Space } from '@nutui/nutui-react-taro'
 
 const Demo4 = () => {
-  const onChange = (
-    value: boolean,
-    event: React.MouseEvent<Element, MouseEvent>
-  ) => {
-    Taro.showToast({ title: `触发了onChange事件，开关状态：${value}` })
-  }
   return (
     <Cell>
-      <Switch
-        defaultChecked
-        onChange={(value, event) => onChange(value, event)}
-      />
+      <Space>
+        <Switch defaultChecked activeText="开启" inactiveText="关闭" />
+        <Switch defaultChecked activeText="开" inactiveText="关" />
+        <Switch defaultChecked activeText="开启" inactiveText="关闭" disabled />
+        <Switch activeText="开启" inactiveText="关闭" disabled />
+      </Space>
     </Cell>
   )
 }
diff --git a/src/packages/switch/demos/taro/demo5.tsx b/src/packages/switch/demos/taro/demo5.tsx
index 6761f71e1b..f1a3a14df4 100644
--- a/src/packages/switch/demos/taro/demo5.tsx
+++ b/src/packages/switch/demos/taro/demo5.tsx
@@ -1,16 +1,24 @@
 import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react-taro'
+import { Cell, Space, Switch } from '@nutui/nutui-react-taro'
+import { Check, Close } from '@nutui/icons-react-taro'
 
 const Demo5 = () => {
   return (
     <Cell>
-      <Switch
-        defaultChecked
-        style={{
-          '--nutui-switch-open-background-color': 'blue',
-          '--nutui-switch-close-line-background-color': '#ebebeb',
-        }}
-      />
+      <Space>
+        <Switch
+          defaultChecked
+          activeText={<Check />}
+          inactiveText={<Close />}
+        />
+        <Switch
+          defaultChecked
+          activeText={<Check />}
+          inactiveText={<Close />}
+          disabled
+        />
+        <Switch activeText={<Check />} inactiveText={<Close />} disabled />
+      </Space>
     </Cell>
   )
 }
diff --git a/src/packages/switch/demos/taro/demo6.tsx b/src/packages/switch/demos/taro/demo6.tsx
index efee6dbb4b..8323f83aed 100644
--- a/src/packages/switch/demos/taro/demo6.tsx
+++ b/src/packages/switch/demos/taro/demo6.tsx
@@ -1,11 +1,33 @@
-import React from 'react'
-import { Cell, Switch } from '@nutui/nutui-react-taro'
+import React, { useState } from 'react'
+import { Cell, Switch, Toast } from '@nutui/nutui-react-taro'
 
 const Demo6 = () => {
+  const [value, setValue] = useState(false)
+  const [showToast, setShowToast] = useState(false)
+  const onChange = (
+    value: boolean,
+    event: React.MouseEvent<Element, MouseEvent>
+  ) => {
+    setValue(value)
+    setShowToast(true)
+  }
   return (
-    <Cell>
-      <Switch defaultChecked activeText="开" inactiveText="关" />
-    </Cell>
+    <>
+      <Cell>
+        <Switch
+          defaultChecked
+          onChange={(value, event) => onChange(value, event)}
+        />
+      </Cell>
+      <Toast
+        type="text"
+        content={`触发了onChange事件，开关状态：${value}`}
+        visible={showToast}
+        onClose={() => {
+          setShowToast(false)
+        }}
+      />
+    </>
   )
 }
 export default Demo6
diff --git a/src/packages/switch/demos/taro/demo7.tsx b/src/packages/switch/demos/taro/demo7.tsx
new file mode 100644
index 0000000000..a69915aca4
--- /dev/null
+++ b/src/packages/switch/demos/taro/demo7.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Cell, Switch } from '@nutui/nutui-react-taro'
+
+const Demo7 = () => {
+  return (
+    <Cell>
+      <Switch
+        defaultChecked
+        style={{
+          '--nutui-switch-active-background-color': 'blue',
+          '--nutui-switch-inactive-line-background-color': '#ebebeb',
+        }}
+      />
+    </Cell>
+  )
+}
+export default Demo7
diff --git a/src/packages/switch/doc.en-US.md b/src/packages/switch/doc.en-US.md
index e653f57d4a..e58dc881d3 100644
--- a/src/packages/switch/doc.en-US.md
+++ b/src/packages/switch/doc.en-US.md
@@ -1,7 +1,5 @@
 # Switch
 
-duction
-
 Used to open or close the options.
 
 ## Import
@@ -36,7 +34,7 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
-### onChange event
+### Support text
 
 :::demo
 
@@ -44,7 +42,7 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
-### Custom color
+### Support Icon
 
 :::demo
 
@@ -52,7 +50,7 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
-### Support text
+### onChange event
 
 :::demo
 
@@ -60,6 +58,14 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
+### Custom color
+
+:::demo
+
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
+
+:::
+
 ## Switch
 
 ### Props
@@ -69,8 +75,8 @@ import { Switch } from '@nutui/nutui-react'
 | defaultChecked | Switch status, uncontrolled | `boolean` | `false` |
 | checked | Switch status, controlled | `boolean` | `false` |
 | disabled | Disabled | `boolean` | `false` |
-| activeText | Text description when opening | `string` | `-` |
-| inactiveText | Text description when closed | `string` | `-` |
+| activeText | Text description when opening | `ReactNode` | `-` |
+| inactiveText | Text description when closed | `ReactNode` | `-` |
 | onChange | Trigger when switching switches | `onChange:(value: boolean, event: Event)` | `-` |
 
 ## Theming
@@ -81,16 +87,18 @@ The component provides the following CSS variables, which can be used to customi
 
 | Name | Description | Default |
 | --- | --- | --- |
-| \--nutui-switch-close-background-color | Switch off state background color | `$color-text-disabled` |
-| \--nutui-switch-open-background-color | Switch on background color | `$color-primary` |
-| \--nutui-switch-close-disabled-background-color | Switch off state's disabled background color | `$color-background` |
-| \--nutui-switch-open-disabled-background-color | Switch on state's disabled background color | `$color-primary-disabled-special` |
-| \--nutui-switch-width | Switch width | `40px` |
-| \--nutui-switch-height | Switch height | `24px` |
-| \--nutui-switch-line-height | Switch line height | `24px` |
-| \--nutui-switch-border-radius | Switch border radius | `8px` |
-| \--nutui-switch-inside-width | Width of button inside switch | `20px` |
-| \--nutui-switch-inside-height | Switch internal button height | `20px` |
-| \--nutui-switch-inside-open-transform | Position of internal button in switch on state | `translateX(18px)` |
-| \--nutui-switch-inside-close-transform | Switch off state internal button position | `translateX(2px)` |
-| \--nutui-switch-close-line-bg-color | Switch off state inner button line color | `#ffffff` |
+| \--nutui-switch-active-background-color | Switch on status background color | `$color-primary` |
+| \--nutui-switch-inactive-background-color | Switch off status background color | `$color-text-disabled` |
+| \--nutui-switch-active-disabled-background-color | Switch toggle on the background color disabled | `$color-primary-disabled-special` |
+| \--nutui-switch-inactive-disabled-background-color | Turn off the background color disabled | `$color-background` |
+| \--nutui-switch-inactive-line-bg-color | Switch Off Internal Button Line Color | `#ffffff` |
+| \--nutui-switch-width | Switch Width | `46px` |
+| \--nutui-switch-height | Switch height | `28px` |
+| \--nutui-switch-line-height | Switch line height | `28px` |
+| \--nutui-switch-border-radius | Switch rounded corner size | `$radius-circle` |
+| \--nutui-switch-border-width | Switch border width | `2px` |
+| \--nutui-switch-inside-border-radius | Switch internal button rounded corner size | `$radius-full` |
+| \--nutui-switch-inside-box-shadow | Switch Internal Button Shadow | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
+| \--nutui-switch-label-text-color | Switch internal text color | `$color-primary-text` |
+| \--nutui-switch-label-font-size | Switch internal text size | `$font-size-s` |
+| \--nutui-switch-inactive-disabled-label-text-color | Turn off and disable internal text color | `$color-text-disabled` |
diff --git a/src/packages/switch/doc.md b/src/packages/switch/doc.md
index 2a9773b7da..5afd82e0eb 100644
--- a/src/packages/switch/doc.md
+++ b/src/packages/switch/doc.md
@@ -34,7 +34,7 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
-### onChange事件
+### 支持文字
 
 :::demo
 
@@ -42,7 +42,7 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
-### 自定义颜色
+### 支持 Icon
 
 :::demo
 
@@ -50,7 +50,7 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
-### 支持文字
+### onChange事件
 
 :::demo
 
@@ -58,6 +58,14 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
+### 自定义颜色
+
+:::demo
+
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
+
+:::
+
 ## Switch
 
 ### Props
@@ -67,8 +75,8 @@ import { Switch } from '@nutui/nutui-react'
 | defaultChecked | 开关状态，非受控 | `boolean` | `false` |
 | checked | 开关状态，受控 | `boolean` | `false` |
 | disabled | 禁用状态 | `boolean` | `false` |
-| activeText | 打开时文字描述 | `string` | `-` |
-| inactiveText | 关闭时文字描述 | `string` | `-` |
+| activeText | 打开时文字描述 | `ReactNode` | `-` |
+| inactiveText | 关闭时文字描述 | `ReactNode` | `-` |
 | onChange | 切换开关时触发 | `onChange:(value: boolean, event: Event)` | `-` |
 
 ## 主题定制
@@ -79,16 +87,18 @@ import { Switch } from '@nutui/nutui-react'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-switch-close-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` |
-| \--nutui-switch-open-background-color | 开关打开状态背景颜色 | `$color-primary` |
-| \--nutui-switch-close-disabled-background-color | 开关关闭时的禁用时的背景颜色 | `$color-background` |
-| \--nutui-switch-open-disabled-background-color | 开关打开时的禁用时的背景颜色 | `$color-primary-disabled-special` |
-| \--nutui-switch-width | 开关宽度 | `40px` |
-| \--nutui-switch-height | 开关高度 | `24px` |
-| \--nutui-switch-line-height | 开关行高 | `24px` |
-| \--nutui-switch-border-radius | 开关圆角大小 | `8px` |
-| \--nutui-switch-inside-width | 开关内部按钮宽度 | `20px` |
-| \--nutui-switch-inside-height | 开关内部按钮高度 | `20px` |
-| \--nutui-switch-inside-open-transform | 开关打开状态内部按钮位置 | `translateX(18px)` |
-| \--nutui-switch-inside-close-transform | 开关关闭状态内部按钮位置 | `translateX(2px)` |
-| \--nutui-switch-close-line-bg-color | 开关关闭状态内部按钮线条颜色 | `#ffffff` |
+| \--nutui-switch-active-background-color | 开关打开状态背景颜色 | `$color-primary` |
+| \--nutui-switch-inactive-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` |
+| \--nutui-switch-active-disabled-background-color | 开关打开状态禁用的背景颜色 | `$color-primary-disabled-special` |
+| \--nutui-switch-inactive-disabled-background-color | 开关关闭状态禁用的背景颜色 | `$color-background` |
+| \--nutui-switch-inactive-line-bg-color | 开关关闭状态内部按钮线条颜色 | `#ffffff` |
+| \--nutui-switch-width | 开关宽度 | `46px` |
+| \--nutui-switch-height | 开关高度 | `28px` |
+| \--nutui-switch-line-height | 开关行高 | `28px` |
+| \--nutui-switch-border-radius | 开关圆角大小 | `$radius-circle` |
+| \--nutui-switch-border-width | 开关边框宽度 | `2px` |
+| \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-full` |
+| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
+| \--nutui-switch-label-text-color | 开关内部文字颜色 | `$color-primary-text` |
+| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-s` |
+| \--nutui-switch-inactive-disabled-label-text-color | 开关关闭禁用内部文字颜色 | `$color-text-disabled` |
diff --git a/src/packages/switch/doc.taro.md b/src/packages/switch/doc.taro.md
index 4f0c2a965d..9ead4a5a25 100644
--- a/src/packages/switch/doc.taro.md
+++ b/src/packages/switch/doc.taro.md
@@ -34,7 +34,7 @@ import { Switch } from '@nutui/nutui-react-taro'
 
 :::
 
-### onChange事件
+### 支持文字
 
 :::demo
 
@@ -42,7 +42,7 @@ import { Switch } from '@nutui/nutui-react-taro'
 
 :::
 
-### 自定义颜色
+### 支持 Icon
 
 :::demo
 
@@ -50,7 +50,7 @@ import { Switch } from '@nutui/nutui-react-taro'
 
 :::
 
-### 支持文字
+### onChange事件
 
 :::demo
 
@@ -58,6 +58,14 @@ import { Switch } from '@nutui/nutui-react-taro'
 
 :::
 
+### 自定义颜色
+
+:::demo
+
+<CodeBlock src='taro/demo7.tsx'></CodeBlock>
+
+:::
+
 ## Switch
 
 ### Props
@@ -67,8 +75,8 @@ import { Switch } from '@nutui/nutui-react-taro'
 | defaultChecked | 开关状态，非受控 | `boolean` | `false` |
 | checked | 开关状态，受控 | `boolean` | `false` |
 | disabled | 禁用状态 | `boolean` | `false` |
-| activeText | 打开时文字描述 | `string` | `-` |
-| inactiveText | 关闭时文字描述 | `string` | `-` |
+| activeText | 打开时文字描述 | `ReactNode` | `-` |
+| inactiveText | 关闭时文字描述 | `ReactNode` | `-` |
 | onChange | 切换开关时触发 | `onChange:(value: boolean, event: Event)` | `-` |
 
 ## 主题定制
@@ -79,16 +87,18 @@ import { Switch } from '@nutui/nutui-react-taro'
 
 | 名称 | 说明 | 默认值 |
 | --- | --- | --- |
-| \--nutui-switch-close-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` |
-| \--nutui-switch-open-background-color | 开关打开状态背景颜色 | `$color-primary` |
-| \--nutui-switch-close-disabled-background-color | 开关关闭时的禁用时的背景颜色 | `$color-background` |
-| \--nutui-switch-open-disabled-background-color | 开关打开时的禁用时的背景颜色 | `$color-primary-disabled-special` |
-| \--nutui-switch-width | 开关宽度 | `40px` |
-| \--nutui-switch-height | 开关高度 | `24px` |
-| \--nutui-switch-line-height | 开关行高 | `24px` |
-| \--nutui-switch-border-radius | 开关圆角大小 | `8px` |
-| \--nutui-switch-inside-width | 开关内部按钮宽度 | `20px` |
-| \--nutui-switch-inside-height | 开关内部按钮高度 | `20px` |
-| \--nutui-switch-inside-open-transform | 开关打开状态内部按钮位置 | `translateX(18px)` |
-| \--nutui-switch-inside-close-transform | 开关关闭状态内部按钮位置 | `translateX(2px)` |
-| \--nutui-switch-close-line-bg-color | 开关关闭状态内部按钮线条颜色 | `#ffffff` |
+| \--nutui-switch-active-background-color | 开关打开状态背景颜色 | `$color-primary` |
+| \--nutui-switch-inactive-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` |
+| \--nutui-switch-active-disabled-background-color | 开关打开状态禁用的背景颜色 | `$color-primary-disabled-special` |
+| \--nutui-switch-inactive-disabled-background-color | 开关关闭状态禁用的背景颜色 | `$color-background` |
+| \--nutui-switch-inactive-line-bg-color | 开关关闭状态内部按钮线条颜色 | `#ffffff` |
+| \--nutui-switch-width | 开关宽度 | `46px` |
+| \--nutui-switch-height | 开关高度 | `28px` |
+| \--nutui-switch-line-height | 开关行高 | `28px` |
+| \--nutui-switch-border-radius | 开关圆角大小 | `$radius-circle` |
+| \--nutui-switch-border-width | 开关边框宽度 | `2px` |
+| \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-full` |
+| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
+| \--nutui-switch-label-text-color | 开关内部文字颜色 | `$color-primary-text` |
+| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-s` |
+| \--nutui-switch-inactive-disabled-label-text-color | 开关关闭禁用内部文字颜色 | `$color-text-disabled` |
diff --git a/src/packages/switch/doc.zh-TW.md b/src/packages/switch/doc.zh-TW.md
index 323c27074e..f0663524df 100644
--- a/src/packages/switch/doc.zh-TW.md
+++ b/src/packages/switch/doc.zh-TW.md
@@ -34,7 +34,7 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
-### onChange事件
+### 支持文字
 
 :::demo
 
@@ -42,7 +42,7 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
-### 自定義顏色
+### 支持 Icon
 
 :::demo
 
@@ -50,7 +50,7 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
-### 支持文字
+### onChange事件
 
 :::demo
 
@@ -58,17 +58,25 @@ import { Switch } from '@nutui/nutui-react'
 
 :::
 
+### 自定義顏色
+
+:::demo
+
+<CodeBlock src='h5/demo7.tsx'></CodeBlock>
+
+:::
+
 ## Switch
 
 ### Props
 
-| 屬性 | 說明 | 類型 | 默認值 |
+| 屬性 | 説明 | 類型 | 默認值 |
 | --- | --- | --- | --- |
 | defaultChecked | 開關狀態，非受控 | `boolean` | `false` |
 | checked | 開關狀態，受控 | `boolean` | `false` |
 | disabled | 禁用狀態 | `boolean` | `false` |
-| activeText | 打開時文字描述 | `string` | `-` |
-| inactiveText | 關閉時文字描述 | `string` | `-` |
+| activeText | 打開時文字描述 | `ReactNode` | `-` |
+| inactiveText | 關閉時文字描述 | `ReactNode` | `-` |
 | onChange | 切換開關時觸發 | `onChange:(value: boolean, event: Event)` | `-` |
 
 ## 主題定製
@@ -77,18 +85,20 @@ import { Switch } from '@nutui/nutui-react'
 
 組件提供了下列 CSS 變量，可用於自定義樣式，使用方法請參考 [ConfigProvider 組件](#/zh-CN/component/configprovider)。
 
-| 名稱 | 說明 | 默認值 |
+| 名稱 | 説明 | 默認值 |
 | --- | --- | --- |
-| \--nutui-switch-close-background-color | 開關關閉狀態背景顏色 | `$color-text-disabled` |
-| \--nutui-switch-open-background-color | 開關打開狀態背景顏色 | `$color-primary` |
-| \--nutui-switch-close-disabled-background-color | 開關關閉時的禁用時的背景顏色 | `$color-background` |
-| \--nutui-switch-open-disabled-background-color | 開關打開時的禁用時的背景顏色 | `$color-primary-disabled-special` |
-| \--nutui-switch-width | 開關寬度 | `40px` |
-| \--nutui-switch-height | 開關高度 | `24px` |
-| \--nutui-switch-line-height | 開關行高 | `24px` |
-| \--nutui-switch-border-radius | 開關圓角大小 | `8px` |
-| \--nutui-switch-inside-width | 開關內部按鈕寬度 | `20px` |
-| \--nutui-switch-inside-height | 開關內部按鈕高度 | `20px` |
-| \--nutui-switch-inside-open-transform | 開關打開狀態內部按鈕位置 | `translateX(18px)` |
-| \--nutui-switch-inside-close-transform | 開關關閉狀態內部按鈕位置 | `translateX(2px)` |
-| \--nutui-switch-close-line-bg-color | 開關關閉狀態內部按鈕線條顏色 | `#ffffff` |
+| \--nutui-switch-active-background-color | 開關打開狀態背景顏色 | `$color-primary` |
+| \--nutui-switch-inactive-background-color | 開關關閉狀態背景顏色 | `$color-text-disabled` |
+| \--nutui-switch-active-disabled-background-color | 開關打開狀態禁用的背景顏色 | `$color-primary-disabled-special` |
+| \--nutui-switch-inactive-disabled-background-color | 開關關閉狀態禁用的背景顏色 | `$color-background` |
+| \--nutui-switch-inactive-line-bg-color | 開關關閉狀態內部按鈕線條顏色 | `#ffffff` |
+| \--nutui-switch-width | 開關寬度 | `46px` |
+| \--nutui-switch-height | 開關高度 | `28px` |
+| \--nutui-switch-line-height | 開關行高 | `28px` |
+| \--nutui-switch-border-radius | 開關圓角大小 | `$radius-circle` |
+| \--nutui-switch-border-width | 開關邊框寬度 | `2px` |
+| \--nutui-switch-inside-border-radius | 開關內部按鈕圓角大小 | `$radius-full` |
+| \--nutui-switch-inside-box-shadow | 開關內部按鈕陰影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
+| \--nutui-switch-label-text-color | 開關內部文字顏色 | `$color-primary-text` |
+| \--nutui-switch-label-font-size | 開關內部文字大小 | `$font-size-s` |
+| \--nutui-switch-inactive-disabled-label-text-color | 開關關閉禁用內部文字顏色 | `$color-text-disabled` |
diff --git a/src/packages/switch/switch.scss b/src/packages/switch/switch.scss
index 9a1e7b5b00..2c086eb925 100644
--- a/src/packages/switch/switch.scss
+++ b/src/packages/switch/switch.scss
@@ -1,12 +1,13 @@
 .nut-switch {
   cursor: pointer;
+  position: relative;
   display: flex;
   flex-direction: row;
   align-items: center;
-  width: $switch-width;
+  min-width: $switch-width;
   height: $switch-height;
   line-height: $switch-line-height;
-  background-color: $switch-open-background-color;
+  background-color: $switch-active-background-color;
   border-radius: $switch-border-radius;
   background-size: 100% 100%;
   background-repeat: no-repeat;
@@ -14,64 +15,79 @@
   flex: 0 0 auto; // 防止被压缩
 
   &-button {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    height: $switch-inside-height;
-    width: $switch-inside-width;
-    transform: $switch-inside-close-transform;
+    height: calc($switch-height - $switch-border-width * 2);
+    width: calc($switch-height - $switch-border-width * 2);
     border-radius: $switch-inside-border-radius;
     background: $color-primary-text;
-    transition: transform 0.3s;
-    box-shadow: $switch-button-box-shadow;
+    transition: left 0.3s linear;
+    box-shadow: $switch-inside-box-shadow;
     &-open {
-      transform: $switch-inside-open-transform;
+      left: calc(100% - $switch-height + $switch-border-width);
       &-rtl {
-        transform: var(--nutui-switch-inside-open-transform, translateX(-18px));
+        left: $switch-border-width;
       }
     }
     &-close {
-      transform: $switch-inside-close-transform;
+      left: $switch-border-width;
       &-rtl {
-        transform: var(--nutui-switch-inside-close-transform, translateX(-2px));
+        left: calc(100% - $switch-height + $switch-border-width);
       }
     }
   }
 
   &-close {
-    background-color: $switch-close-background-color;
+    background-color: $switch-inactive-background-color;
     &-line {
-      width: 12px;
+      width: calc(($switch-height - $switch-border-width * 2) / 2);
       height: 2px;
-      background: $switch-close-line-background-color;
+      background: $switch-inactive-line-background-color;
       border-radius: 2px;
     }
   }
 
-  &-disabled {
-    background-color: $switch-open-disabled-background-color;
-    &-close {
-      background-color: $switch-close-disabled-background-color;
-    }
-  }
-
   &-label {
-    color: $color-primary-text;
-    font-size: $font-size-s;
-
+    display: inline-flex;
+    align-items: center;
+    height: 100%;
+    white-space: nowrap;
+    color: $switch-label-text-color;
+    font-size: $switch-label-font-size;
+    .nut-icon {
+      color: $switch-label-text-color;
+    }
     &-open {
-      transform: translateX(-18px);
+      margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
       &-rtl {
-        transform: translateX(18px);
+        margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
       }
     }
 
     &-close {
-      transform: translateX(18px);
+      margin: 0 7px 0 calc($switch-height - $switch-border-width + 3px);
       &-rtl {
-        transform: translateX(-18px);
+        margin: 0 calc($switch-height - $switch-border-width + 3px) 0 7px;
       }
     }
+
+    &-close-disabled {
+      color: $switch-inactive-disabled-label-text-color;
+      .nut-icon {
+        color: $switch-inactive-disabled-label-text-color;
+      }
+    }
+  }
+
+  &-disabled {
+    background-color: $switch-active-disabled-background-color;
+    &-close {
+      background-color: $switch-inactive-disabled-background-color;
+    }
   }
 }
diff --git a/src/packages/switch/switch.taro.tsx b/src/packages/switch/switch.taro.tsx
index 01a29a3f34..64976f2005 100644
--- a/src/packages/switch/switch.taro.tsx
+++ b/src/packages/switch/switch.taro.tsx
@@ -10,8 +10,8 @@ export interface SwitchProps extends BasicComponent {
   checked: boolean
   defaultChecked: boolean
   disabled: boolean
-  activeText: string
-  inactiveText: string
+  activeText: React.ReactNode
+  inactiveText: React.ReactNode
   onChange: (
     val: boolean,
     event: React.MouseEvent<Element, MouseEvent> | ITouchEvent
@@ -90,25 +90,20 @@ export const Switch: FunctionComponent<Partial<SwitchProps>> = (props) => {
         {!value && !activeText && (
           <View className={`${classPrefix}-close-line`} />
         )}
-        {activeText && (
-          <View
-            className={classNames([
-              [`${classPrefix}-label`],
-              [
-                value
-                  ? `${classPrefix}-label-open`
-                  : `${classPrefix}-label-close`,
-              ],
-              {
-                [`${classPrefix}-label-open-rtl`]: rtl && value,
-                [`${classPrefix}-button-close-rtl`]: rtl && !value,
-              },
-            ])}
-          >
-            {value ? activeText : inactiveText}
-          </View>
-        )}
       </View>
+      {activeText && (
+        <View
+          className={classNames(`${classPrefix}-label`, {
+            [`${classPrefix}-label-open`]: value,
+            [`${classPrefix}-label-close`]: !value,
+            [`${classPrefix}-label-open-rtl`]: rtl && value,
+            [`${classPrefix}-label-close-rtl`]: rtl && !value,
+            [`${classPrefix}-label-close-disabled`]: disabled && !value,
+          })}
+        >
+          {value ? activeText : inactiveText}
+        </View>
+      )}
     </View>
   )
 }
diff --git a/src/packages/switch/switch.tsx b/src/packages/switch/switch.tsx
index 53f37bb28c..7cdda7d524 100644
--- a/src/packages/switch/switch.tsx
+++ b/src/packages/switch/switch.tsx
@@ -8,8 +8,8 @@ export interface SwitchProps extends BasicComponent {
   checked: boolean
   defaultChecked: boolean
   disabled: boolean
-  activeText: string
-  inactiveText: string
+  activeText: React.ReactNode
+  inactiveText: React.ReactNode
   onChange: (val: boolean, event: React.MouseEvent) => void
 }
 const defaultProps = {
@@ -83,25 +83,20 @@ export const Switch: FunctionComponent<Partial<SwitchProps>> = (props) => {
         {!value && !activeText && (
           <div className={`${classPrefix}-close-line`} />
         )}
-        {activeText && (
-          <div
-            className={classNames([
-              [`${classPrefix}-label`],
-              [
-                value
-                  ? `${classPrefix}-label-open`
-                  : `${classPrefix}-label-close`,
-              ],
-              {
-                [`${classPrefix}-label-open-rtl`]: rtl && value,
-                [`${classPrefix}-button-close-rtl`]: rtl && !value,
-              },
-            ])}
-          >
-            {value ? activeText : inactiveText}
-          </div>
-        )}
       </div>
+      {activeText && (
+        <div
+          className={classNames(`${classPrefix}-label`, {
+            [`${classPrefix}-label-open`]: value,
+            [`${classPrefix}-label-close`]: !value,
+            [`${classPrefix}-label-open-rtl`]: rtl && value,
+            [`${classPrefix}-label-close-rtl`]: rtl && !value,
+            [`${classPrefix}-label-close-disabled`]: disabled && !value,
+          })}
+        >
+          {value ? activeText : inactiveText}
+        </div>
+      )}
     </div>
   )
 }
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index d471a05575..464f564d3b 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -853,47 +853,63 @@ $avatar-normal-width: var(--nutui-avatar-normal-width, 40px) !default;
 $avatar-normal-height: var(--nutui-avatar-normal-height, 40px) !default;
 
 //switch（✅）
-$switch-close-background-color: var(
-  --nutui-switch-close-background-color,
+$switch-active-background-color: var(
+  --nutui-switch-active-background-color,
+  $color-primary
+) !default;
+$switch-inactive-background-color: var(
+  --nutui-switch-inactive-background-color,
   $color-text-disabled
 ) !default;
-$switch-open-background-color: var(
-  --nutui-switch-open-background-color,
-  $color-primary
+$switch-active-disabled-background-color: var(
+  --nutui-switch-active-disabled-background-color,
+  $color-primary-disabled-special
 ) !default;
-$switch-close-disabled-background-color: var(
-  --nutui-switch-close-disabled-background-color,
+$switch-inactive-disabled-background-color: var(
+  --nutui-switch-inactive-disabled-background-color,
   $color-background
 ) !default;
-$switch-open-disabled-background-color: var(
-  --nutui-switch-open-disabled-background-color,
-  $color-primary-disabled-special
+$switch-inactive-line-background-color: var(
+  --nutui-switch-inactive-line-background-color,
+  #ffffff
 ) !default;
-$switch-close-line-background-color: var(
-  --nutui-switch-close-line-background-color,
-  #fff
+$switch-width: var(--nutui-switch-width, 46px) !default;
+$switch-height: var(--nutui-switch-height, 28px) !default;
+$switch-line-height: var(--nutui-switch-line-height, 28px) !default;
+$switch-border-radius: var(
+  --nutui-switch-border-radius,
+  $radius-circle
 ) !default;
-$switch-width: var(--nutui-switch-width, 40px) !default;
-$switch-height: var(--nutui-switch-height, 24px) !default;
-$switch-line-height: var(--nutui-switch-line-height, 24px) !default;
-$switch-border-radius: var(--nutui-switch-border-radius, 8px) !default;
-$switch-inside-width: var(--nutui-switch-inside-width, 20px) !default;
-$switch-inside-height: var(--nutui-switch-inside-height, 20px) !default;
+$switch-border-width: var(--nutui-switch-border-width, 2px) !default;
 $switch-inside-border-radius: var(
   --nutui-switch-inside-border-radius,
-  $radius-s
-) !default;
-$switch-inside-open-transform: var(
-  --nutui-switch-inside-open-transform,
-  translateX(18px)
+  $radius-full
+) !default;
+/* #ifdef harmony */
+$switch-inside-box-shadow: var(
+  --nutui-switch-inside-box-shadow,
+  0px 2px 6px 0px rgba(0, 0, 0, 0.1)
+) !default;
+/* #endif */
+/* #ifndef harmony */
+$switch-inside-box-shadow: var(
+  --nutui-switch-inside-box-shadow,
+  0px 2px 1px 0px rgba(0, 0, 0, 0.06),
+  0px 2px 6px 0px rgba(0, 0, 0, 0.1),
+  0px 0px 0px 1px rgba(0, 0, 0, 0.02)
+) !default;
+/* #endif */
+$switch-label-text-color: var(
+  --nutui-switch-label-text-color,
+  $color-primary-text
 ) !default;
-$switch-inside-close-transform: var(
-  --nutui-switch-inside-close-transform,
-  translateX(2px)
+$switch-label-font-size: var(
+  --nutui-switch-label-font-size,
+  $font-size-s
 ) !default;
-$switch-button-box-shadow: var(
-  --nutui-switch-box-shadow,
-  0 0 transparent
+$switch-inactive-disabled-label-text-color: var(
+  --nutui-switch-inactive-disabled-label-text-color,
+  $color-text-disabled
 ) !default;
 
 // toast（✅）