diff --git a/scripts/build-data.js b/scripts/build-data.js
index 5ed982d..35e117d 100644
--- a/scripts/build-data.js
+++ b/scripts/build-data.js
@@ -40,13 +40,24 @@ var emojiLibByChar = Object.keys(emojiLib.lib).reduce(
   {}
 )
 
-var categories = ['Smileys & People', 'Animals & Nature', 'Food & Drink', 'Activities', 'Travel & Places', 'Objects', 'Symbols', 'Flags'],
-    data = { categories: [], emojis: {}, skins: {}, short_names: {} },
+var data = { categories: [], emojis: {}, skins: {}, short_names: {} },
     categoriesIndex = {}
 
+var categories = [
+  ['Smileys & People', 'people'],
+  ['Animals & Nature', 'nature'],
+  ['Food & Drink', 'foods'],
+  ['Activities', 'activity'],
+  ['Travel & Places', 'places'],
+  ['Objects', 'objects'],
+  ['Symbols', 'symbols'],
+  ['Flags', 'flags'],
+]
+
 categories.forEach((category, i) => {
-  data.categories[i] = { name: category, emojis: [] }
-  categoriesIndex[category] = i
+  let [name, id] = category
+  data.categories[i] = { id: id, name: name, emojis: [] }
+  categoriesIndex[name] = i
 })
 
 emojiData.sort((a, b) => {
diff --git a/src/components/category.js b/src/components/category.js
index 9a8dd43..88fa0a5 100644
--- a/src/components/category.js
+++ b/src/components/category.js
@@ -144,7 +144,7 @@ export default class Category extends React.Component {
   }
 
   render() {
-    var { name, hasStickyPosition, emojiProps, i18n } = this.props,
+    var { id, name, hasStickyPosition, emojiProps, i18n } = this.props,
       emojis = this.getEmojis(),
       labelStyles = {},
       labelSpanStyles = {},
@@ -180,7 +180,7 @@ export default class Category extends React.Component {
           className="emoji-mart-category-label"
         >
           <span style={labelSpanStyles} ref={this.setLabelRef}>
-            {i18n.categories[name.toLowerCase()]}
+            {i18n.categories[id]}
           </span>
         </div>
 
diff --git a/src/components/picker.js b/src/components/picker.js
index 53672bb..8116137 100644
--- a/src/components/picker.js
+++ b/src/components/picker.js
@@ -10,9 +10,9 @@ import { deepMerge, measureScrollbar } from '../utils'
 
 import { Anchors, Category, Emoji, Preview, Search } from '.'
 
-const RECENT_CATEGORY = { name: 'Recent', emojis: null }
-const SEARCH_CATEGORY = { name: 'Search', emojis: null, anchor: false }
-const CUSTOM_CATEGORY = { name: 'Custom', emojis: [] }
+const RECENT_CATEGORY = { id: 'recent', name: 'Recent', emojis: null }
+const SEARCH_CATEGORY = { id: 'search', name: 'Search', emojis: null, anchor: false }
+const CUSTOM_CATEGORY = { id: 'custom', name: 'Custom', emojis: [] }
 
 const I18N = {
   search: 'Search',
@@ -459,6 +459,7 @@ export default class Picker extends React.PureComponent {
               <Category
                 ref={this.setCategoryRef.bind(this, `category-${i}`)}
                 key={category.name}
+                id={category.id}
                 name={category.name}
                 emojis={category.emojis}
                 perLine={perLine}