diff --git a/src/collections/Menu/MenuItem.js b/src/collections/Menu/MenuItem.js
index f02ea3be9f..abaa187532 100644
--- a/src/collections/Menu/MenuItem.js
+++ b/src/collections/Menu/MenuItem.js
@@ -20,7 +20,7 @@ function MenuItem(props) {
   const classes = cx(
     useKeyOnly(active, 'active'),
     useKeyOrValueAndKey(fitted, 'fitted'),
-    useKeyOnly(icon, 'icon'),
+    useKeyOnly(icon === true || icon && !(name || content), 'icon'),
     useKeyOnly(header, 'header'),
     useKeyOnly(link, 'link'),
     color,
diff --git a/test/specs/collections/Menu/MenuItem-test.js b/test/specs/collections/Menu/MenuItem-test.js
index 6da2652a54..6dbfcf64e7 100644
--- a/test/specs/collections/Menu/MenuItem-test.js
+++ b/test/specs/collections/Menu/MenuItem-test.js
@@ -38,6 +38,21 @@ describe('MenuItem', () => {
     })
   })
 
+  describe('icon', () => {
+    it('does not add `icon` className if there is also `name`', () => {
+      shallow(<MenuItem icon='user' name='users' />)
+        .should.not.have.className('icon')
+    })
+    it('does not add `icon` className if there is also `content`', () => {
+      shallow(<MenuItem icon='user' content='Users' />)
+        .should.not.have.className('icon')
+    })
+    it('adds `icon` className if there is an `icon` without `name` or `content`', () => {
+      shallow(<MenuItem icon='user' />)
+        .should.have.className('icon')
+    })
+  })
+
   describe('onClick', () => {
     it('can be omitted', () => {
       const click = () => mount(<MenuItem />).simulate('click')