diff --git a/docs/examples/common.tsx b/docs/examples/common.tsx
new file mode 100644
index 0000000..5ec407a
--- /dev/null
+++ b/docs/examples/common.tsx
@@ -0,0 +1,25 @@
+
+import React from 'react';
+import type { PreviewProps } from '@/Preview';
+import {
+    CloseOutlined,
+    LeftOutlined,
+    RightOutlined,
+    RotateLeftOutlined,
+    RotateRightOutlined,
+    SwapOutlined,
+    ZoomInOutlined,
+    ZoomOutOutlined,
+  } from '@ant-design/icons';
+  
+  export const defaultIcons: PreviewProps['icons'] = {
+    rotateLeft: <RotateLeftOutlined />,
+    rotateRight: <RotateRightOutlined />,
+    zoomIn: <ZoomInOutlined />,
+    zoomOut: <ZoomOutOutlined />,
+    close: <CloseOutlined />,
+    left: <LeftOutlined />,
+    right: <RightOutlined />,
+    flipX: <SwapOutlined />,
+    flipY: <SwapOutlined rotate={90} />,
+  };
\ No newline at end of file
diff --git a/tests/__snapshots__/preview.test.tsx.snap b/tests/__snapshots__/preview.test.tsx.snap
index 2dafc82..1c8484e 100644
--- a/tests/__snapshots__/preview.test.tsx.snap
+++ b/tests/__snapshots__/preview.test.tsx.snap
@@ -76,28 +76,7 @@ exports[`Preview add rootClassName should be correct when open preview 1`] = `
   >
     <button
       class="rc-image-preview-close"
-    >
-      <span
-        aria-label="close"
-        class="anticon anticon-close"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="close"
-          fill="currentColor"
-          fill-rule="evenodd"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M799.86 166.31c.02 0 .04.02.08.06l57.69 57.7c.04.03.05.05.06.08a.12.12 0 010 .06c0 .03-.02.05-.06.09L569.93 512l287.7 287.7c.04.04.05.06.06.09a.12.12 0 010 .07c0 .02-.02.04-.06.08l-57.7 57.69c-.03.04-.05.05-.07.06a.12.12 0 01-.07 0c-.03 0-.05-.02-.09-.06L512 569.93l-287.7 287.7c-.04.04-.06.05-.09.06a.12.12 0 01-.07 0c-.02 0-.04-.02-.08-.06l-57.69-57.7c-.04-.03-.05-.05-.06-.07a.12.12 0 010-.07c0-.03.02-.05.06-.09L454.07 512l-287.7-287.7c-.04-.04-.05-.06-.06-.09a.12.12 0 010-.07c0-.02.02-.04.06-.08l57.7-57.69c.03-.04.05-.05.07-.06a.12.12 0 01.07 0c.03 0 .05.02.09.06L512 454.07l287.7-287.7c.04-.04.06-.05.09-.06a.12.12 0 01.07 0z"
-          />
-        </svg>
-      </span>
-    </button>
+    />
     <div
       class="rc-image-preview-footer"
     >
@@ -106,155 +85,22 @@ exports[`Preview add rootClassName should be correct when open preview 1`] = `
       >
         <div
           class="rc-image-preview-operations-operation rc-image-preview-operations-operation-flipY"
-        >
-          <span
-            aria-label="swap"
-            class="anticon anticon-swap"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="swap"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              style="transform: rotate(90deg);"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
-              />
-            </svg>
-          </span>
-        </div>
+        />
         <div
           class="rc-image-preview-operations-operation rc-image-preview-operations-operation-flipX"
-        >
-          <span
-            aria-label="swap"
-            class="anticon anticon-swap"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="swap"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M847.9 592H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h605.2L612.9 851c-4.1 5.2-.4 13 6.3 13h72.5c4.9 0 9.5-2.2 12.6-6.1l168.8-214.1c16.5-21 1.6-51.8-25.2-51.8zM872 356H266.8l144.3-183c4.1-5.2.4-13-6.3-13h-72.5c-4.9 0-9.5 2.2-12.6 6.1L150.9 380.2c-16.5 21-1.6 51.8 25.1 51.8h696c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8z"
-              />
-            </svg>
-          </span>
-        </div>
+        />
         <div
           class="rc-image-preview-operations-operation rc-image-preview-operations-operation-rotateLeft"
-        >
-          <span
-            aria-label="rotate-left"
-            class="anticon anticon-rotate-left"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="rotate-left"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <defs>
-                <style />
-              </defs>
-              <path
-                d="M672 418H144c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H188V494h440v326z"
-              />
-              <path
-                d="M819.3 328.5c-78.8-100.7-196-153.6-314.6-154.2l-.2-64c0-6.5-7.6-10.1-12.6-6.1l-128 101c-4 3.1-3.9 9.1 0 12.3L492 318.6c5.1 4 12.7.4 12.6-6.1v-63.9c12.9.1 25.9.9 38.8 2.5 42.1 5.2 82.1 18.2 119 38.7 38.1 21.2 71.2 49.7 98.4 84.3 27.1 34.7 46.7 73.7 58.1 115.8a325.95 325.95 0 016.5 140.9h74.9c14.8-103.6-11.3-213-81-302.3z"
-              />
-            </svg>
-          </span>
-        </div>
+        />
         <div
           class="rc-image-preview-operations-operation rc-image-preview-operations-operation-rotateRight"
-        >
-          <span
-            aria-label="rotate-right"
-            class="anticon anticon-rotate-right"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="rotate-right"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <defs>
-                <style />
-              </defs>
-              <path
-                d="M480.5 251.2c13-1.6 25.9-2.4 38.8-2.5v63.9c0 6.5 7.5 10.1 12.6 6.1L660 217.6c4-3.2 4-9.2 0-12.3l-128-101c-5.1-4-12.6-.4-12.6 6.1l-.2 64c-118.6.5-235.8 53.4-314.6 154.2A399.75 399.75 0 00123.5 631h74.9c-.9-5.3-1.7-10.7-2.4-16.1-5.1-42.1-2.1-84.1 8.9-124.8 11.4-42.2 31-81.1 58.1-115.8 27.2-34.7 60.3-63.2 98.4-84.3 37-20.6 76.9-33.6 119.1-38.8z"
-              />
-              <path
-                d="M880 418H352c-17.7 0-32 14.3-32 32v414c0 17.7 14.3 32 32 32h528c17.7 0 32-14.3 32-32V450c0-17.7-14.3-32-32-32zm-44 402H396V494h440v326z"
-              />
-            </svg>
-          </span>
-        </div>
+        />
         <div
           class="rc-image-preview-operations-operation rc-image-preview-operations-operation-zoomOut rc-image-preview-operations-operation-disabled"
-        >
-          <span
-            aria-label="zoom-out"
-            class="anticon anticon-zoom-out"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="zoom-out"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M637 443H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h312c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
-              />
-            </svg>
-          </span>
-        </div>
+        />
         <div
           class="rc-image-preview-operations-operation rc-image-preview-operations-operation-zoomIn"
-        >
-          <span
-            aria-label="zoom-in"
-            class="anticon anticon-zoom-in"
-            role="img"
-          >
-            <svg
-              aria-hidden="true"
-              data-icon="zoom-in"
-              fill="currentColor"
-              focusable="false"
-              height="1em"
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M637 443H519V309c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v134H325c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h118v134c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V519h118c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm284 424L775 721c122.1-148.9 113.6-369.5-26-509-148-148.1-388.4-148.1-537 0-148.1 148.6-148.1 389 0 537 139.5 139.6 360.1 148.1 509 26l146 146c3.2 2.8 8.3 2.8 11 0l43-43c2.8-2.7 2.8-7.8 0-11zM696 696c-118.8 118.7-311.2 118.7-430 0-118.7-118.8-118.7-311.2 0-430 118.8-118.7 311.2-118.7 430 0 118.7 118.8 118.7 311.2 0 430z"
-              />
-            </svg>
-          </span>
-        </div>
+        />
       </div>
     </div>
   </div>,