diff --git a/ui/src/components/icon/index.js b/ui/src/components/icon/index.js
new file mode 100644
index 00000000..973d9d71
--- /dev/null
+++ b/ui/src/components/icon/index.js
@@ -0,0 +1,20 @@
+const React = require('react');
+// const icons = require('react-icons/md');
+
+const Icon = ({
+  name,
+  className,
+  style
+}) => {
+  // const Component = icons[name];
+  // <Component className={className} style={style} />
+  return (<div />);
+};
+
+Icon.propTypes = {
+  className: React.PropTypes.string,
+  name: React.PropTypes.string.isRequired,
+  style: React.PropTypes.object
+};
+
+module.exports = Icon;
diff --git a/ui/src/components/icon/readme.md b/ui/src/components/icon/readme.md
new file mode 100644
index 00000000..71d653dd
--- /dev/null
+++ b/ui/src/components/icon/readme.md
@@ -0,0 +1,40 @@
+# `<Checkbox>`
+
+## demo
+
+```embed
+const React = require('react');
+const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
+const Checkbox = require('./index.js');
+const styles = require('./style.css');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column>
+        <Checkbox checked>
+          Checkbox checked
+        </Checkbox>
+      </Column>
+    </Row>
+    <Row>
+      <Column>
+        <Checkbox>
+          Checkbox unchecked
+        </Checkbox>
+      </Column>
+    </Row>
+    <Row>
+      <Column>
+        <Checkbox disabled>
+          Checkbox disabled
+        </Checkbox>
+      </Column>
+    </Row>
+  </Base>
+);
+```