diff --git a/docs/public/svg/favicon-dev.svg b/docs/public/svg/favicon-dev.svg
new file mode 100644
index 00000000000..516e4fa9229
--- /dev/null
+++ b/docs/public/svg/favicon-dev.svg
@@ -0,0 +1,11 @@
+
diff --git a/docs/public/svg/favicon.svg b/docs/public/svg/favicon.svg
new file mode 100644
index 00000000000..37c0f1878c2
--- /dev/null
+++ b/docs/public/svg/favicon.svg
@@ -0,0 +1,6 @@
+
diff --git a/docs/src/pages/_app.page.tsx b/docs/src/pages/_app.page.tsx
index d33e12984f2..6535b258114 100644
--- a/docs/src/pages/_app.page.tsx
+++ b/docs/src/pages/_app.page.tsx
@@ -12,10 +12,15 @@ function MyApp({ Component, pageProps }) {
const router = useRouter();
const { platform = 'react' } = router.query;
const [colorMode, setColorMode] = useState('system');
+ const favicon =
+ process.env.NODE_ENV === 'development'
+ ? '/svg/favicon-dev.svg'
+ : '/svg/favicon.svg';
return (
<>
Amplify UI
+