diff --git a/src/packages/pulltorefresh/demos/h5/demo1.tsx b/src/packages/pulltorefresh/demos/h5/demo1.tsx
index 46260afeef..8f69b10ffb 100644
--- a/src/packages/pulltorefresh/demos/h5/demo1.tsx
+++ b/src/packages/pulltorefresh/demos/h5/demo1.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { PullToRefresh, Toast } from '@nutui/nutui-react'
+import { Lottie, PullToRefresh, Toast } from '@nutui/nutui-react'
+import lightPull from '@/packages/lottie/animation/light/pulltorefresh.json'
 
 const Demo1 = () => {
   const [list] = useState([1, 2, 3, 4, 5, 6, 7])
@@ -15,21 +16,7 @@ const Demo1 = () => {
         renderIcon={(status) => {
           return (
             <>
-              {(status === 'pulling' || status === 'complete') && (
-                <svg width="36" height="26" viewBox="0 0 36 26" fill="none">
-                  <path
-                    d="M34.7243 10.965C32.842 8.94809 32.4297 5.92727 31.2018 4.90525C29.9738 3.88324 28.1722 5.51123 27.5089 6.46993C23.8429 3.88324 17.9809 4.00082 17.9809 4.00082C17.9809 4.00082 12.1458 3.88324 8.47083 6.46993C7.80754 5.51123 6.01488 3.88324 4.78691 4.90525C3.55894 5.92727 3.15559 8.94809 1.2733 10.965C-0.133943 12.4844 -0.250465 12.9276 0.323186 14.1305C0.887874 15.3334 4.40149 16.3283 6.88432 13.9496C7.21596 15.1887 10.0125 21.9991 17.9899 21.9991C25.9672 21.9991 28.7817 15.1887 29.1043 13.9496C31.5872 16.3283 35.1098 15.3334 35.6834 14.1305C36.2481 12.9276 36.1316 12.4844 34.7243 10.965Z"
-                    fill="#818181"
-                  />
-                </svg>
-              )}
-              {(status === 'canRelease' || status === 'refreshing') && (
-                <svg width="36" height="26" viewBox="0 0 36 26" fill="none">
-                  <circle cx="18" cy="13" r="3" fill="#818181" />
-                  <circle cx="33" cy="13" r="3" fill="#818181" />
-                  <circle cx="3" cy="13" r="3" fill="#818181" />
-                </svg>
-              )}
+              <Lottie source={lightPull} style={{ width: 132, height: 26 }} />
             </>
           )
         }}
diff --git a/src/packages/pulltorefresh/demos/h5/demo2.tsx b/src/packages/pulltorefresh/demos/h5/demo2.tsx
index c9cae56754..73c873f14c 100644
--- a/src/packages/pulltorefresh/demos/h5/demo2.tsx
+++ b/src/packages/pulltorefresh/demos/h5/demo2.tsx
@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
-import { PullToRefresh, Toast } from '@nutui/nutui-react'
+import { Lottie, PullToRefresh, Toast } from '@nutui/nutui-react'
+import whitePull from '@/packages/lottie/animation/dark/pulltorefresh-white.json'
 
 const Demo1 = () => {
   const [list] = useState([1, 2, 3, 4, 5, 6, 7])
@@ -16,21 +17,7 @@ const Demo1 = () => {
         renderIcon={(status) => {
           return (
             <>
-              {(status === 'pulling' || status === 'complete') && (
-                <svg width="36" height="26" viewBox="0 0 36 26" fill="none">
-                  <path
-                    d="M34.7243 10.965C32.842 8.94809 32.4297 5.92727 31.2018 4.90525C29.9738 3.88324 28.1722 5.51123 27.5089 6.46993C23.8429 3.88324 17.9809 4.00082 17.9809 4.00082C17.9809 4.00082 12.1458 3.88324 8.47083 6.46993C7.80754 5.51123 6.01488 3.88324 4.78691 4.90525C3.55894 5.92727 3.15559 8.94809 1.2733 10.965C-0.133943 12.4844 -0.250465 12.9276 0.323186 14.1305C0.887874 15.3334 4.40149 16.3283 6.88432 13.9496C7.21596 15.1887 10.0125 21.9991 17.9899 21.9991C25.9672 21.9991 28.7817 15.1887 29.1043 13.9496C31.5872 16.3283 35.1098 15.3334 35.6834 14.1305C36.2481 12.9276 36.1316 12.4844 34.7243 10.965Z"
-                    fill="#ffffff"
-                  />
-                </svg>
-              )}
-              {(status === 'canRelease' || status === 'refreshing') && (
-                <svg width="36" height="26" viewBox="0 0 36 26" fill="none">
-                  <circle cx="18" cy="13" r="3" fill="#ffffff" />
-                  <circle cx="33" cy="13" r="3" fill="#ffffff" />
-                  <circle cx="3" cy="13" r="3" fill="#ffffff" />
-                </svg>
-              )}
+              <Lottie source={whitePull} style={{ width: 132, height: 26 }} />
             </>
           )
         }}
@@ -41,6 +28,7 @@ const Demo1 = () => {
               textAlign: 'center',
               height: '50px',
               lineHeight: '50px',
+              color: 'white',
             }}
             key={item}
           >
diff --git a/src/packages/pulltorefresh/demos/taro/demo1.tsx b/src/packages/pulltorefresh/demos/taro/demo1.tsx
index efabca17ea..aedbbcf492 100644
--- a/src/packages/pulltorefresh/demos/taro/demo1.tsx
+++ b/src/packages/pulltorefresh/demos/taro/demo1.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
-import { Image, View } from '@tarojs/components'
-import { PullToRefresh } from '@nutui/nutui-react-taro'
+import { View } from '@tarojs/components'
+import { PullToRefresh, Lottie } from '@nutui/nutui-react-taro'
 import Taro from '@tarojs/taro'
 import pxTransform from '@/utils/px-transform'
+import lightPull from '@/packages/lottie/animation/light/pulltorefresh.json'
 
 const Demo1 = () => {
   const [list] = useState([1, 2, 3, 4, 5, 6, 7])
@@ -26,18 +27,7 @@ const Demo1 = () => {
         renderIcon={(status) => {
           return (
             <>
-              {(status === 'pulling' || status === 'complete') && (
-                <Image
-                  style={{ height: pxTransform(26), width: pxTransform(36) }}
-                  src="https://img13.360buyimg.com/imagetools/jfs/t1/219180/19/37902/438/65fa8cbbF5278d022/5eabe69b64bba791.png"
-                />
-              )}
-              {(status === 'canRelease' || status === 'refreshing') && (
-                <Image
-                  style={{ height: pxTransform(26), width: pxTransform(36) }}
-                  src="https://img10.360buyimg.com/imagetools/jfs/t1/230454/20/14523/223/65fab2d1F379c3968/ac35992443abab0c.png"
-                />
-              )}
+              <Lottie source={lightPull} style={{ width: 132, height: 26 }} />
             </>
           )
         }}
diff --git a/src/packages/pulltorefresh/demos/taro/demo3.tsx b/src/packages/pulltorefresh/demos/taro/demo3.tsx
index 933b3bd686..8e4c4d0bfa 100644
--- a/src/packages/pulltorefresh/demos/taro/demo3.tsx
+++ b/src/packages/pulltorefresh/demos/taro/demo3.tsx
@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
-import { Image, Text, View } from '@tarojs/components'
-import { PullToRefresh } from '@nutui/nutui-react-taro'
+import { Text, View } from '@tarojs/components'
+import { Lottie, PullToRefresh } from '@nutui/nutui-react-taro'
 import Taro from '@tarojs/taro'
 import pxTransform from '@/utils/px-transform'
+import lightPull from '@/packages/lottie/animation/light/pulltorefresh.json'
 
 const Demo1 = () => {
   const [list] = useState([1, 2, 3, 4, 5, 6, 7])
@@ -22,18 +23,7 @@ const Demo1 = () => {
         renderIcon={(status) => {
           return (
             <>
-              {(status === 'pulling' || status === 'complete') && (
-                <Image
-                  style={{ height: pxTransform(26), width: pxTransform(36) }}
-                  src="https://img12.360buyimg.com/imagetools/jfs/t1/232373/2/15010/432/65fab02fF99afdb71/0457cdfa268f92df.png"
-                />
-              )}
-              {(status === 'canRelease' || status === 'refreshing') && (
-                <Image
-                  style={{ height: pxTransform(26), width: pxTransform(36) }}
-                  src="https://img14.360buyimg.com/imagetools/jfs/t1/186707/25/42738/223/65fab272F0965554b/eae33de2f17909b8.png"
-                />
-              )}
+              <Lottie source={lightPull} style={{ width: 132, height: 26 }} />
             </>
           )
         }}
diff --git a/src/packages/pulltorefresh/pulltorefresh.scss b/src/packages/pulltorefresh/pulltorefresh.scss
index 21ee71381c..7a16567fcb 100644
--- a/src/packages/pulltorefresh/pulltorefresh.scss
+++ b/src/packages/pulltorefresh/pulltorefresh.scss
@@ -9,7 +9,7 @@
       bottom: 0;
       left: 0;
       width: 100%;
-      color: $color-title;
+      color: $color-text-help;
       display: flex;
       flex-direction: column;
       justify-content: center;
diff --git a/src/packages/pulltorefresh/pulltorefresh.taro.tsx b/src/packages/pulltorefresh/pulltorefresh.taro.tsx
index acb2730b84..4f92ea3dbb 100644
--- a/src/packages/pulltorefresh/pulltorefresh.taro.tsx
+++ b/src/packages/pulltorefresh/pulltorefresh.taro.tsx
@@ -39,7 +39,7 @@ const defaultProps = {
   completeText: '',
   completeDelay: 500,
   disabled: false,
-  headHeight: 50,
+  headHeight: 64 + 16,
   threshold: 60,
   scrollTop: 0,
   onRefresh: () => {},
diff --git a/src/packages/pulltorefresh/pulltorefresh.tsx b/src/packages/pulltorefresh/pulltorefresh.tsx
index d1046c5f83..e49f3f3f14 100644
--- a/src/packages/pulltorefresh/pulltorefresh.tsx
+++ b/src/packages/pulltorefresh/pulltorefresh.tsx
@@ -43,7 +43,7 @@ const defaultProps = {
   completeText: '',
   completeDelay: 500,
   disabled: false,
-  headHeight: 50,
+  headHeight: 64 + 16,
   threshold: 60,
   onRefresh: () => {},
 } as PullToRefreshProps