diff --git a/packages/react-components/src/components/FlareLogoLoading.css b/packages/react-components/src/components/FlareLogoLoading.css
new file mode 100644
index 0000000..c538b0c
--- /dev/null
+++ b/packages/react-components/src/components/FlareLogoLoading.css
@@ -0,0 +1,18 @@
+.flare-logo-loading-container {
+ position: relative;
+ top: 100%;
+ left: 50%;
+ margin-left: -2.5rem;
+}
+
+.flare-logo-loading-svg {
+ transform-origin: 50% 50%;
+ animation: rotate-flare-logo 0.4s linear infinite;
+}
+
+/* Animations */
+@keyframes rotate-flare-logo {
+ 100% {
+ transform: rotate(90deg);
+ }
+}
diff --git a/packages/react-components/src/components/FlareLogoLoading.tsx b/packages/react-components/src/components/FlareLogoLoading.tsx
new file mode 100644
index 0000000..4280625
--- /dev/null
+++ b/packages/react-components/src/components/FlareLogoLoading.tsx
@@ -0,0 +1,16 @@
+import React, { FC } from 'react';
+
+import './FlareLogoLoading.css';
+import FlareLogo from './icons/FlareLogo';
+
+const FlareLogoLoading: FC<{ hidden?: boolean }> = ({ hidden }) => {
+ return (
+
+ );
+};
+
+export default FlareLogoLoading;
diff --git a/packages/react-components/src/components/icons/FlareLogo.tsx b/packages/react-components/src/components/icons/FlareLogo.tsx
new file mode 100644
index 0000000..65eedfb
--- /dev/null
+++ b/packages/react-components/src/components/icons/FlareLogo.tsx
@@ -0,0 +1,86 @@
+import React, { FC } from 'react';
+
+const FlareLogo: FC<{ remSize: number; hidden?: boolean }> = ({ remSize, hidden }) => {
+ return (
+
+
+
+ );
+};
+
+export default FlareLogo;