diff --git a/ui/src/components/button-icon/index.js b/ui/src/components/button-icon/index.js
new file mode 100644
index 00000000..c108657f
--- /dev/null
+++ b/ui/src/components/button-icon/index.js
@@ -0,0 +1,36 @@
+const React = require('react');
+const classNames = require('classnames');
+const styles = require('./style.css');
+const Button = require('../button');
+
+const ButtonIcon = ({
+  name = 'beer',
+  className,
+  iconSet = 'fa',
+  style
+}) => {
+
+  const Component = require(`react-icons/lib/${iconSet}/${name}`);
+
+  const cn = classNames(
+    className,
+    styles.icon
+  );
+
+  return (
+    <div>
+      <Button>
+        <Component className={cn} style={style} />
+      </Button>
+    </div>
+  );
+};
+
+ButtonIcon.propTypes = {
+  className: React.PropTypes.string,
+  iconSet: React.PropTypes.string.isRequired,
+  name: React.PropTypes.string.isRequired,
+  style: React.PropTypes.object
+};
+
+module.exports = ButtonIcon;
diff --git a/ui/src/components/button-icon/readme.md b/ui/src/components/button-icon/readme.md
new file mode 100644
index 00000000..ef340293
--- /dev/null
+++ b/ui/src/components/button-icon/readme.md
@@ -0,0 +1,37 @@
+# `<ButtonIcon>`
+
+## 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 ButtonIcon = require('./index.js');
+const styles = require('./style.css');
+
+nmodule.exports = ReactDOM.renderToString(
+  <Base>
+    <Row>
+      <Column>
+        <ButtonIcon iconSet='fa' name='beer' />
+      </Column>
+    </Row>
+  </Base>
+);
+```
+
+## usage
+
+```js
+const React = require('react');
+const ButtonIcon = require('ui/button-icon');
+
+module.exports = () => {
+  return (
+    <ButtonIcon iconSet='fa' name='beer' />
+  );
+}
+```
diff --git a/ui/src/components/button-icon/style.css b/ui/src/components/button-icon/style.css
new file mode 100644
index 00000000..86e66eb4
--- /dev/null
+++ b/ui/src/components/button-icon/style.css
@@ -0,0 +1,3 @@
+.icon {
+  font-size: inherit;
+}
diff --git a/ui/src/docs.js b/ui/src/docs.js
index 51f3218e..a9647a62 100644
--- a/ui/src/docs.js
+++ b/ui/src/docs.js
@@ -16,6 +16,7 @@ module.exports = {
     Select: require('./components/select/readme.md'),
     Column: require('./components/column/readme.md'),
     Button: require('./components/button/readme.md'),
+    'Button Icon': require('./components/button-icon/readme.md'),
     'Range Slider': require('./components/range-slider/readme.md'),
     Toggle: require('./components/toggle/readme.md'),
     Checkbox: require('./components/checkbox/readme.md'),
diff --git a/ui/src/index.js b/ui/src/index.js
index b5aebfcd..e86cab2b 100644
--- a/ui/src/index.js
+++ b/ui/src/index.js
@@ -2,6 +2,7 @@ module.exports = {
   Avatar: require('./components/avatar'),
   Base: require('./components/base'),
   Button: require('./components/button'),
+  ButtonIcon: require('./components/button-icon'),
   Checkbox: require('./components/checkbox'),
   Column: require('./components/column'),
   Container: require('./components/container'),