diff --git a/client/common/Icon.jsx b/client/common/Icon.jsx
new file mode 100644
index 00000000..6b8bacb2
--- /dev/null
+++ b/client/common/Icon.jsx
@@ -0,0 +1,34 @@
+/* eslint-disable global-require */
+import InlineSVG from 'react-inlinesvg';
+import PropTypes from 'prop-types';
+import React from 'react';
+import lodash from 'lodash';
+
+const icons = {
+ github: require('../images/github.svg'),
+ google: require('../images/google.svg'),
+};
+
+/*
+ names will be an mirror-object of icon names:
+ {
+ github: 'github',
+ ...
+ }
+*/
+const names = lodash.mapValues(icons, (value, key) => key);
+
+
+function Icon({ name, ...props }) {
+ return (
+
+ );
+}
+
+Icon.names = names;
+
+Icon.propTypes = {
+ name: PropTypes.oneOf(Object.keys(names)).isRequired
+};
+
+export default Icon;
diff --git a/client/common/Icon.stories.jsx b/client/common/Icon.stories.jsx
new file mode 100644
index 00000000..83d4b286
--- /dev/null
+++ b/client/common/Icon.stories.jsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { select } from '@storybook/addon-knobs';
+
+import Icon from './Icon';
+
+export default {
+ title: 'Common/Icon',
+ component: Icon
+};
+
+export const AllIcons = () => {
+ const firstIconName = Object.keys(Icon.names)[0];
+
+ return (
+
+ );
+};