diff --git a/src/client/components/loading_icon/stories/loading_icon.stories.tsx b/src/client/components/loading_icon/stories/loading_icon.stories.tsx
new file mode 100644
index 00000000..ba0318c5
--- /dev/null
+++ b/src/client/components/loading_icon/stories/loading_icon.stories.tsx
@@ -0,0 +1,12 @@
+import { storiesOf } from '@storybook/react'
+import * as React from 'react'
+
+import { LoadingIcon } from '../view'
+
+storiesOf('components.loading_icon', module)
+  .add('renders animated', () => {
+    return <LoadingIcon />
+  })
+  .add('renders with custom size', () => {
+    return <LoadingIcon size={64} />
+  })
diff --git a/src/client/components/loading_icon/styles.css b/src/client/components/loading_icon/styles.css
new file mode 100644
index 00000000..c9d24d8f
--- /dev/null
+++ b/src/client/components/loading_icon/styles.css
@@ -0,0 +1,16 @@
+.loading {
+  animation: rotationAnimation 0.7s linear infinite;
+}
+
+.circle {
+  stroke-dasharray: 89, 200;
+  stroke-dashoffset: -35px;
+  stroke-linecap: round;
+  stroke: #1197d3;
+}
+
+@keyframes rotationAnimation {
+  100% {
+    transform: rotate(360deg);
+  }
+}
diff --git a/src/client/components/loading_icon/view.tsx b/src/client/components/loading_icon/view.tsx
new file mode 100644
index 00000000..8de19161
--- /dev/null
+++ b/src/client/components/loading_icon/view.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+
+import * as styles from './styles.css'
+
+export class LoadingIcon extends React.PureComponent<{ size?: number }> {
+  render() {
+    const { size = 32 } = this.props
+    return <svg width={size} height={size} className={styles.loading} role='progressbar' viewBox='25 25 50 50'>
+      <circle
+        className={styles.circle}
+        cx='50'
+        cy='50'
+        fill='none'
+        r='20'
+        strokeMiterlimit='10'
+        strokeWidth='4'
+      />
+    </svg>
+  }
+}