diff --git a/packages/document/main-doc/docs/en/tutorials/first-app/c01-start.mdx b/packages/document/main-doc/docs/en/tutorials/first-app/c01-start.mdx
index b5a92ff21120..b8222106b15c 100644
--- a/packages/document/main-doc/docs/en/tutorials/first-app/c01-start.mdx
+++ b/packages/document/main-doc/docs/en/tutorials/first-app/c01-start.mdx
@@ -38,7 +38,7 @@ We delete the original sample code and replace it with a simple point of contact
 const getAvatar = (users: Array<{ name: string; email: string }>) =>
   users.map(user => ({
     ...user,
-    avatar: `https://avatars.dicebear.com/v2/identicon/${user.name}.svg`,
+    avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${user.name}`,
   }));
 
 const mockData = getAvatar([
diff --git a/packages/document/main-doc/docs/en/tutorials/first-app/c03-css.mdx b/packages/document/main-doc/docs/en/tutorials/first-app/c03-css.mdx
index c925b6b493b5..9cac22d8418d 100644
--- a/packages/document/main-doc/docs/en/tutorials/first-app/c03-css.mdx
+++ b/packages/document/main-doc/docs/en/tutorials/first-app/c03-css.mdx
@@ -178,7 +178,7 @@ import Item from '../components/Item';
 const getAvatar = (users: Array<{ name: string, email: string }>) =>
   users.map(user => ({
     ...user,
-    avatar: `https://avatars.dicebear.com/v2/identicon/${user.name}.svg`,
+    avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${user.name}`,
   }));
 
 const mockData = getAvatar([
diff --git a/packages/document/main-doc/docs/en/tutorials/first-app/c04-routes.mdx b/packages/document/main-doc/docs/en/tutorials/first-app/c04-routes.mdx
index f21fc2c6575a..93d23d6cb914 100644
--- a/packages/document/main-doc/docs/en/tutorials/first-app/c04-routes.mdx
+++ b/packages/document/main-doc/docs/en/tutorials/first-app/c04-routes.mdx
@@ -42,7 +42,7 @@ import Item from '../../components/Item';
 const getAvatar = (users: Array<{ name: string; email: string }>) =>
   users.map(user => ({
     ...user,
-    avatar: `https://avatars.dicebear.com/v2/identicon/${user.name}.svg`,
+    avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${user.name}`,
   }));
 
 const getMockArchivedData = () =>
diff --git a/packages/document/main-doc/docs/en/tutorials/first-app/c05-loader.mdx b/packages/document/main-doc/docs/en/tutorials/first-app/c05-loader.mdx
index 7aafaf4604b9..736d1df744b6 100644
--- a/packages/document/main-doc/docs/en/tutorials/first-app/c05-loader.mdx
+++ b/packages/document/main-doc/docs/en/tutorials/first-app/c05-loader.mdx
@@ -37,7 +37,7 @@ export const loader = async (): Promise<LoaderData> => {
     const firstName = name.firstName();
     return {
       name: firstName,
-      avatar: `https://avatars.dicebear.com/api/identicon/${firstName}.svg`,
+      avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${firstName}`,
       email: internet.email(),
     };
   });
diff --git a/packages/document/main-doc/docs/en/tutorials/first-app/c06-model.mdx b/packages/document/main-doc/docs/en/tutorials/first-app/c06-model.mdx
index 9e02e2141544..3c3564545f30 100644
--- a/packages/document/main-doc/docs/en/tutorials/first-app/c06-model.mdx
+++ b/packages/document/main-doc/docs/en/tutorials/first-app/c06-model.mdx
@@ -212,7 +212,7 @@ export const loader = async (): Promise<LoaderData> => {
     const firstName = name.firstName();
     return {
       name: firstName,
-      avatar: `https://avatars.dicebear.com/api/identicon/${firstName}.svg`,
+      avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${firstName}`,
       email: internet.email(),
       archived: false,
     };
diff --git a/packages/document/main-doc/docs/en/tutorials/first-app/c07-container.mdx b/packages/document/main-doc/docs/en/tutorials/first-app/c07-container.mdx
index 05c9bc6f6de6..e59aae0d5434 100644
--- a/packages/document/main-doc/docs/en/tutorials/first-app/c07-container.mdx
+++ b/packages/document/main-doc/docs/en/tutorials/first-app/c07-container.mdx
@@ -30,7 +30,7 @@ export const loader = async (): Promise<LoaderData> => {
     const firstName = name.firstName();
     return {
       name: firstName,
-      avatar: `https://avatars.dicebear.com/api/identicon/${firstName}.svg`,
+      avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${firstName}`,
       email: internet.email(),
     };
   });
diff --git a/packages/document/main-doc/docs/zh/tutorials/first-app/c01-start.mdx b/packages/document/main-doc/docs/zh/tutorials/first-app/c01-start.mdx
index 699136b1dad9..48d205a2dc08 100644
--- a/packages/document/main-doc/docs/zh/tutorials/first-app/c01-start.mdx
+++ b/packages/document/main-doc/docs/zh/tutorials/first-app/c01-start.mdx
@@ -38,7 +38,7 @@ import DebugApp from "@site-docs/components/debug-app"
 const getAvatar = (users: Array<{ name: string; email: string }>) =>
   users.map(user => ({
     ...user,
-    avatar: `https://avatars.dicebear.com/v2/identicon/${user.name}.svg`,
+    avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${user.name}`,
   }));
 
 const mockData = getAvatar([
diff --git a/packages/document/main-doc/docs/zh/tutorials/first-app/c03-css.mdx b/packages/document/main-doc/docs/zh/tutorials/first-app/c03-css.mdx
index 623c5af92786..81f11ff8d888 100644
--- a/packages/document/main-doc/docs/zh/tutorials/first-app/c03-css.mdx
+++ b/packages/document/main-doc/docs/zh/tutorials/first-app/c03-css.mdx
@@ -177,7 +177,7 @@ import Item from '../components/Item';
 const getAvatar = (users: Array<{ name: string, email: string }>) =>
   users.map(user => ({
     ...user,
-    avatar: `https://avatars.dicebear.com/v2/identicon/${user.name}.svg`,
+    avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${user.name}`,
   }));
 
 const mockData = getAvatar([
diff --git a/packages/document/main-doc/docs/zh/tutorials/first-app/c04-routes.mdx b/packages/document/main-doc/docs/zh/tutorials/first-app/c04-routes.mdx
index de9edb177f1a..025eb5fdf0dd 100644
--- a/packages/document/main-doc/docs/zh/tutorials/first-app/c04-routes.mdx
+++ b/packages/document/main-doc/docs/zh/tutorials/first-app/c04-routes.mdx
@@ -42,7 +42,7 @@ import Item from '../../components/Item';
 const getAvatar = (users: Array<{ name: string; email: string }>) =>
   users.map(user => ({
     ...user,
-    avatar: `https://avatars.dicebear.com/v2/identicon/${user.name}.svg`,
+    avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${user.name}`,
   }));
 
 const getMockArchivedData = () =>
diff --git a/packages/document/main-doc/docs/zh/tutorials/first-app/c05-loader.mdx b/packages/document/main-doc/docs/zh/tutorials/first-app/c05-loader.mdx
index eb9ab66fa8e2..4ebb8928ef6f 100644
--- a/packages/document/main-doc/docs/zh/tutorials/first-app/c05-loader.mdx
+++ b/packages/document/main-doc/docs/zh/tutorials/first-app/c05-loader.mdx
@@ -37,7 +37,7 @@ export const loader = async (): Promise<LoaderData> => {
     const firstName = name.firstName();
     return {
       name: firstName,
-      avatar: `https://avatars.dicebear.com/api/identicon/${firstName}.svg`,
+      avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${firstName}`,
       email: internet.email(),
     };
   });
diff --git a/packages/document/main-doc/docs/zh/tutorials/first-app/c06-model.mdx b/packages/document/main-doc/docs/zh/tutorials/first-app/c06-model.mdx
index 68bde2cc4a74..9d8b23c82fb8 100644
--- a/packages/document/main-doc/docs/zh/tutorials/first-app/c06-model.mdx
+++ b/packages/document/main-doc/docs/zh/tutorials/first-app/c06-model.mdx
@@ -209,7 +209,7 @@ export const loader async (): Promise<LoaderData> => {
     const firstName = name.firstName();
     return {
       name: firstName,
-      avatar: `https://avatars.dicebear.com/api/identicon/${firstName}.svg`,
+      avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${firstName}`,
       email: internet.email(),
       archived: false,
     };
diff --git a/packages/document/main-doc/docs/zh/tutorials/first-app/c07-container.mdx b/packages/document/main-doc/docs/zh/tutorials/first-app/c07-container.mdx
index 84a48177cdd5..7c1ef31517e6 100644
--- a/packages/document/main-doc/docs/zh/tutorials/first-app/c07-container.mdx
+++ b/packages/document/main-doc/docs/zh/tutorials/first-app/c07-container.mdx
@@ -30,7 +30,7 @@ export const loader = async (): Promise<LoaderData> => {
     const firstName = name.firstName();
     return {
       name: firstName,
-      avatar: `https://avatars.dicebear.com/api/identicon/${firstName}.svg`,
+      avatar: `https://api.dicebear.com/7.x/pixel-art/svg?seed=${firstName}`,
       email: internet.email(),
     };
   });