diff --git a/package.json b/package.json
index c1931913756582cc4555ef51dc37aa45ce60a435..ce70ed9d460f58be999e3e4ca8dd3efb79a120b1 100644
--- a/package.json
+++ b/package.json
@@ -10,9 +10,11 @@
   "jsnext:main": "src",
   "dependencies": {
     "classnames": "^2.2.5",
+    "humps": "^2.0.1",
     "prop-types": "^15.5.10",
     "react": "^15.6.1",
     "react-dom": "^15.6.1",
+    "react-feather": "^1.0.7",
     "react-redux": "^5.0.6",
     "react-router": "^3.0.5",
     "react-tag-autocomplete": "^5.4.1",
diff --git a/src/atoms/Icon.js b/src/atoms/Icon.js
new file mode 100644
index 0000000000000000000000000000000000000000..6c3a37d89c85310204b0e2a3896cb7891b9f8028
--- /dev/null
+++ b/src/atoms/Icon.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import { pascalize } from 'humps'
+import * as icons from 'react-feather'
+
+const Icon = ({ children, color = 'black', size = 24 }) => {
+  // convert `arrow_left` to `ArrowLeft`
+  const name = pascalize(children)
+
+  // select the icon
+  const icon = icons[name]
+
+  return (
+    <span>{icon({ color, size })}</span>
+  )
+}
+
+export default Icon
diff --git a/src/atoms/Icon.md b/src/atoms/Icon.md
new file mode 100644
index 0000000000000000000000000000000000000000..bbee0593695c749fbedce849fd13fcc740629a74
--- /dev/null
+++ b/src/atoms/Icon.md
@@ -0,0 +1,17 @@
+An icon, from the [Feather](https://feathericons.com/) icon set.
+
+```js
+<Icon>arrow_right</Icon>
+```
+
+The color can be changed.
+
+```js
+<Icon color="red">arrow_right</Icon>
+``` 
+
+The size can be changed.
+
+```js
+<Icon size={48}>arrow_right</Icon>
+```