diff --git a/docs/app/Examples/elements/Icon/Groups/IconCornerGroupExample.js b/docs/app/Examples/elements/Icon/Groups/IconCornerGroupExample.js
deleted file mode 100644
index 6b89756abe..0000000000
--- a/docs/app/Examples/elements/Icon/Groups/IconCornerGroupExample.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { Component } from 'react'
-import { Icon } from 'semantic-ui-react'
-
-export default class IconCornerGroupExample extends Component {
-  render() {
-    return (
-      <Icon.Group size='huge'>
-        <Icon name='puzzle' />
-        <Icon corner name='add' />
-      </Icon.Group>
-    )
-  }
-}
diff --git a/docs/app/Examples/elements/Icon/Groups/IconExampleCornerGroup.js b/docs/app/Examples/elements/Icon/Groups/IconExampleCornerGroup.js
new file mode 100644
index 0000000000..48ca986a91
--- /dev/null
+++ b/docs/app/Examples/elements/Icon/Groups/IconExampleCornerGroup.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+
+const IconExampleCornerGroup = () => (
+  <Icon.Group size='huge'>
+    <Icon name='puzzle' />
+    <Icon corner name='add' />
+  </Icon.Group>
+)
+
+export default IconExampleCornerGroup
diff --git a/docs/app/Examples/elements/Icon/Groups/IconExampleIconGroup.js b/docs/app/Examples/elements/Icon/Groups/IconExampleIconGroup.js
new file mode 100644
index 0000000000..92a04e0869
--- /dev/null
+++ b/docs/app/Examples/elements/Icon/Groups/IconExampleIconGroup.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+
+const IconExampleIconGroup = () => (
+  <Icon.Group size='huge'>
+    <Icon size='big' name='thin circle' />
+    <Icon name='user' />
+  </Icon.Group>
+)
+
+export default IconExampleIconGroup
diff --git a/docs/app/Examples/elements/Icon/Groups/IconExampleLoadingGroup.js b/docs/app/Examples/elements/Icon/Groups/IconExampleLoadingGroup.js
new file mode 100644
index 0000000000..2761c31287
--- /dev/null
+++ b/docs/app/Examples/elements/Icon/Groups/IconExampleLoadingGroup.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+
+const IconExampleLoadingGroup = () => (
+  <div>
+    <Icon.Group size='huge'>
+      <Icon size='big' color='red' name='dont' />
+      <Icon color='black' name='use' />
+    </Icon.Group>
+    <Icon.Group size='huge'>
+      <Icon loading size='big' name='sun' />
+      <Icon name='user' />
+    </Icon.Group>
+  </div>
+)
+
+export default IconExampleLoadingGroup
diff --git a/docs/app/Examples/elements/Icon/Groups/IconExampleTwitterGroup.js b/docs/app/Examples/elements/Icon/Groups/IconExampleTwitterGroup.js
new file mode 100644
index 0000000000..e5da3d9764
--- /dev/null
+++ b/docs/app/Examples/elements/Icon/Groups/IconExampleTwitterGroup.js
@@ -0,0 +1,14 @@
+import React from 'react'
+import { Header, Icon } from 'semantic-ui-react'
+
+const IconExampleTwitterGroup = () => (
+  <Header as='h2'>
+    <Icon.Group size='large'>
+      <Icon name='twitter' />
+      <Icon corner name='add' />
+    </Icon.Group>
+    Add on Twitter
+  </Header>
+)
+
+export default IconExampleTwitterGroup
diff --git a/docs/app/Examples/elements/Icon/Groups/IconIconGroupExample.js b/docs/app/Examples/elements/Icon/Groups/IconIconGroupExample.js
deleted file mode 100644
index 95049d57c0..0000000000
--- a/docs/app/Examples/elements/Icon/Groups/IconIconGroupExample.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { Component } from 'react'
-import { Icon } from 'semantic-ui-react'
-
-export default class IconIconGroupExample extends Component {
-  render() {
-    return (
-      <Icon.Group size='huge'>
-        <Icon size='big' name='thin circle' />
-        <Icon name='user' />
-      </Icon.Group>
-    )
-  }
-}
diff --git a/docs/app/Examples/elements/Icon/Groups/IconLoadingGroupExample.js b/docs/app/Examples/elements/Icon/Groups/IconLoadingGroupExample.js
deleted file mode 100644
index 7e66664fb9..0000000000
--- a/docs/app/Examples/elements/Icon/Groups/IconLoadingGroupExample.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React, { Component } from 'react'
-import { Icon } from 'semantic-ui-react'
-
-export default class IconLoadingGroupExample extends Component {
-  render() {
-    return (
-      <div>
-        <Icon.Group size='huge'>
-          <Icon size='big' color='red' name='dont' />
-          <Icon color='black' name='use' />
-        </Icon.Group>
-        <Icon.Group size='huge'>
-          <Icon loading size='big' name='sun' />
-          <Icon name='user' />
-        </Icon.Group>
-      </div>
-    )
-  }
-}
diff --git a/docs/app/Examples/elements/Icon/Groups/IconTwitterGroupExample.js b/docs/app/Examples/elements/Icon/Groups/IconTwitterGroupExample.js
deleted file mode 100644
index ac2a769b58..0000000000
--- a/docs/app/Examples/elements/Icon/Groups/IconTwitterGroupExample.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, { Component } from 'react'
-import { Header, Icon } from 'semantic-ui-react'
-
-export default class IconTwitterGroupExample extends Component {
-  render() {
-    return (
-      <Header as='h2'>
-        <Icon.Group size='large'>
-          <Icon name='twitter' />
-          <Icon corner name='add' />
-        </Icon.Group>
-        Add on Twitter
-      </Header>
-    )
-  }
-}
diff --git a/docs/app/Examples/elements/Icon/Groups/index.js b/docs/app/Examples/elements/Icon/Groups/index.js
index 5cfe322a80..75463aa5b4 100644
--- a/docs/app/Examples/elements/Icon/Groups/index.js
+++ b/docs/app/Examples/elements/Icon/Groups/index.js
@@ -1,28 +1,26 @@
-import React, { Component } from 'react'
+import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-export default class IconGroupsExamples extends Component {
-  render() {
-    return (
-      <ExampleSection title='Groups'>
-        <ComponentExample
-          title='Icons'
-          description='Several icons can be used together as a group'
-          examplePath='elements/Icon/Groups/IconIconGroupExample'
-        />
-        <ComponentExample
-          examplePath='elements/Icon/Groups/IconLoadingGroupExample'
-        />
-        <ComponentExample
-          title='Corner Icon'
-          description='A group of icons can display a smaller corner icon'
-          examplePath='elements/Icon/Groups/IconCornerGroupExample'
-        />
-        <ComponentExample
-          examplePath='elements/Icon/Groups/IconTwitterGroupExample'
-        />
-      </ExampleSection>
-    )
-  }
-}
+const IconGroupsExamples = () => (
+  <ExampleSection title='Groups'>
+    <ComponentExample
+      title='Icons'
+      description='Several icons can be used together as a group.'
+      examplePath='elements/Icon/Groups/IconExampleIconGroup'
+    />
+    <ComponentExample
+      examplePath='elements/Icon/Groups/IconExampleLoadingGroup'
+    />
+    <ComponentExample
+      title='Corner Icon'
+      description='A group of icons can display a smaller corner icon.'
+      examplePath='elements/Icon/Groups/IconExampleCornerGroup'
+    />
+    <ComponentExample
+      examplePath='elements/Icon/Groups/IconExampleTwitterGroup'
+    />
+  </ExampleSection>
+)
+
+export default IconGroupsExamples
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconAccessibilityExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleAccessibility.js
similarity index 93%
rename from docs/app/Examples/elements/Icon/IconSet/IconAccessibilityExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleAccessibility.js
index 8aac18c998..a2ef9f8339 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconAccessibilityExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleAccessibility.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconAccessibilityExample = () => (
+const IconExampleAccessibility = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='wheelchair' />
@@ -50,4 +50,4 @@ const IconAccessibilityExample = () => (
   </Grid>
 )
 
-export default IconAccessibilityExample
+export default IconExampleAccessibility
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconAudioExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleAudio.js
similarity index 97%
rename from docs/app/Examples/elements/Icon/IconSet/IconAudioExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleAudio.js
index 984ee6f737..be6a09ee32 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconAudioExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleAudio.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconAudioExample = () => (
+const IconExampleAudio = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='backward' />
@@ -102,4 +102,4 @@ const IconAudioExample = () => (
   </Grid>
 )
 
-export default IconAudioExample
+export default IconExampleAudio
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconBrandsExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleBrands.js
similarity index 99%
rename from docs/app/Examples/elements/Icon/IconSet/IconBrandsExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleBrands.js
index e32fceed52..995a99b796 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconBrandsExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleBrands.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconBrandsExample = () => (
+const IconExampleBrands = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='500px' />
@@ -582,4 +582,4 @@ const IconBrandsExample = () => (
   </Grid>
 )
 
-export default IconBrandsExample
+export default IconExampleBrands
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconComputerExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleComputer.js
similarity index 92%
rename from docs/app/Examples/elements/Icon/IconSet/IconComputerExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleComputer.js
index 56ac5c0866..b076bef7f9 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconComputerExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleComputer.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconComputerExample = () => (
+const IconExampleComputer = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='desktop' />
@@ -38,4 +38,4 @@ const IconComputerExample = () => (
   </Grid>
 )
 
-export default IconComputerExample
+export default IconExampleComputer
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconComputerAndFileSystemExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleComputerAndFileSystem.js
similarity index 95%
rename from docs/app/Examples/elements/Icon/IconSet/IconComputerAndFileSystemExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleComputerAndFileSystem.js
index b90672dec5..803d019b48 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconComputerAndFileSystemExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleComputerAndFileSystem.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconComputerandFileSystemExample = () => (
+const IconExampleComputerAndFileSystem = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='file archive outline' />
@@ -90,4 +90,4 @@ const IconComputerandFileSystemExample = () => (
   </Grid>
 )
 
-export default IconComputerandFileSystemExample
+export default IconExampleComputerAndFileSystem
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconCurrencyExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleCurrency.js
similarity index 93%
rename from docs/app/Examples/elements/Icon/IconSet/IconCurrencyExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleCurrency.js
index a717da8c6c..262f538c61 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconCurrencyExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleCurrency.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconCurrencyExample = () => (
+const IconExampleCurrency = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='bitcoin' />
@@ -46,4 +46,4 @@ const IconCurrencyExample = () => (
   </Grid>
 )
 
-export default IconCurrencyExample
+export default IconExampleCurrency
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconGenderAndSexualityExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleGenderAndSexuality.js
similarity index 94%
rename from docs/app/Examples/elements/Icon/IconSet/IconGenderAndSexualityExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleGenderAndSexuality.js
index 6daf6a89ba..5db31b08e1 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconGenderAndSexualityExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleGenderAndSexuality.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconGenderandSexualityExample = () => (
+const IconExampleGenderAndSexuality = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='female' />
@@ -66,4 +66,4 @@ const IconGenderandSexualityExample = () => (
   </Grid>
 )
 
-export default IconGenderandSexualityExample
+export default IconExampleGenderAndSexuality
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconItemSelectionExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleItemSelection.js
similarity index 96%
rename from docs/app/Examples/elements/Icon/IconSet/IconItemSelectionExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleItemSelection.js
index 5b4f926e6b..65174707ea 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconItemSelectionExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleItemSelection.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconItemSelectionExample = () => (
+const IconExampleItemSelection = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='add circle' />
@@ -90,4 +90,4 @@ const IconItemSelectionExample = () => (
   </Grid>
 )
 
-export default IconItemSelectionExample
+export default IconExampleItemSelection
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconLayoutAdjustmentExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleLayoutAdjustment.js
similarity index 91%
rename from docs/app/Examples/elements/Icon/IconSet/IconLayoutAdjustmentExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleLayoutAdjustment.js
index 46b01105c1..4b21609bdf 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconLayoutAdjustmentExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleLayoutAdjustment.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconLayoutAdjustmentExample = () => (
+const IconExampleLayoutAdjustment = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='block layout' />
@@ -42,4 +42,4 @@ const IconLayoutAdjustmentExample = () => (
   </Grid>
 )
 
-export default IconLayoutAdjustmentExample
+export default IconExampleLayoutAdjustment
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconMapExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleMap.js
similarity index 97%
rename from docs/app/Examples/elements/Icon/IconSet/IconMapExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleMap.js
index dcf9be4fe5..f91fc248f4 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconMapExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleMap.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconMapExample = () => (
+const IconExampleMap = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='bicycle' />
@@ -134,4 +134,4 @@ const IconMapExample = () => (
   </Grid>
 )
 
-export default IconMapExample
+export default IconExampleMap
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconMediaExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleMedia.js
similarity index 93%
rename from docs/app/Examples/elements/Icon/IconSet/IconMediaExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleMedia.js
index 26e0376dc2..ccc415cea2 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconMediaExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleMedia.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconMediaExample = () => (
+const IconExampleMedia = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='area chart' />
@@ -42,4 +42,4 @@ const IconMediaExample = () => (
   </Grid>
 )
 
-export default IconMediaExample
+export default IconExampleMedia
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconMessageExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleMessage.js
similarity index 93%
rename from docs/app/Examples/elements/Icon/IconSet/IconMessageExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleMessage.js
index e812903cf0..a4f498ce06 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconMessageExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleMessage.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconMessageExample = () => (
+const IconExampleMessage = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='announcement' />
@@ -42,4 +42,4 @@ const IconMessageExample = () => (
   </Grid>
 )
 
-export default IconMessageExample
+export default IconExampleMessage
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconMobileExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleMobile.js
similarity index 91%
rename from docs/app/Examples/elements/Icon/IconSet/IconMobileExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleMobile.js
index 30dee85053..3d7c509368 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconMobileExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleMobile.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconMobileExample = () => (
+const IconExampleMobile = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='mobile' />
@@ -30,4 +30,4 @@ const IconMobileExample = () => (
   </Grid>
 )
 
-export default IconMobileExample
+export default IconExampleMobile
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconObjectsExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleObjects.js
similarity index 98%
rename from docs/app/Examples/elements/Icon/IconSet/IconObjectsExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleObjects.js
index 826bf29ac0..4bfa2db677 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconObjectsExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleObjects.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconObjectsExample = () => (
+const IconExampleObjects = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='anchor' />
@@ -182,4 +182,4 @@ const IconObjectsExample = () => (
   </Grid>
 )
 
-export default IconObjectsExample
+export default IconExampleObjects
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconPaymentOptionsExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExamplePaymentOptions.js
similarity index 93%
rename from docs/app/Examples/elements/Icon/IconSet/IconPaymentOptionsExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExamplePaymentOptions.js
index 3db3a1c400..ab08d54b11 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconPaymentOptionsExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExamplePaymentOptions.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconPaymentOptionsExample = () => (
+const IconExamplePaymentOptions = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='american express' />
@@ -50,4 +50,4 @@ const IconPaymentOptionsExample = () => (
   </Grid>
 )
 
-export default IconPaymentOptionsExample
+export default IconExamplePaymentOptions
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconPointersExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExamplePointers.js
similarity index 98%
rename from docs/app/Examples/elements/Icon/IconSet/IconPointersExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExamplePointers.js
index 240dc9782c..092657b49b 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconPointersExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExamplePointers.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconPointersExample = () => (
+const IconExamplePointers = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='angle double down' />
@@ -182,4 +182,4 @@ const IconPointersExample = () => (
   </Grid>
 )
 
-export default IconPointersExample
+export default IconExamplePointers
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconRatingExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleRating.js
similarity index 95%
rename from docs/app/Examples/elements/Icon/IconSet/IconRatingExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleRating.js
index 1320878b9a..e8686e9e40 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconRatingExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleRating.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconRatingExample = () => (
+const IconExampleRating = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='empty heart' />
@@ -58,4 +58,4 @@ const IconRatingExample = () => (
   </Grid>
 )
 
-export default IconRatingExample
+export default IconExampleRating
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconShapesExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleShapes.js
similarity index 95%
rename from docs/app/Examples/elements/Icon/IconSet/IconShapesExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleShapes.js
index aebb7fdbfd..b83b4e3867 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconShapesExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleShapes.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconShapesExample = () => (
+const IconExampleShapes = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='asterisk' />
@@ -66,4 +66,4 @@ const IconShapesExample = () => (
   </Grid>
 )
 
-export default IconShapesExample
+export default IconExampleShapes
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconTablesExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleTables.js
similarity index 95%
rename from docs/app/Examples/elements/Icon/IconSet/IconTablesExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleTables.js
index 69be89fe90..a90859c94f 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconTablesExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleTables.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconTablesExample = () => (
+const IconExampleTables = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='columns' />
@@ -50,4 +50,4 @@ const IconTablesExample = () => (
   </Grid>
 )
 
-export default IconTablesExample
+export default IconExampleTables
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconTechnologiesExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleTechnologies.js
similarity index 94%
rename from docs/app/Examples/elements/Icon/IconSet/IconTechnologiesExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleTechnologies.js
index 2f27a87d3b..892cb19cc7 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconTechnologiesExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleTechnologies.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconTechnologiesExample = () => (
+const IconExampleTechnologies = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='barcode' />
@@ -58,4 +58,4 @@ const IconTechnologiesExample = () => (
   </Grid>
 )
 
-export default IconTechnologiesExample
+export default IconExampleTechnologies
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconTextEditorExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleTextEditor.js
similarity index 97%
rename from docs/app/Examples/elements/Icon/IconSet/IconTextEditorExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleTextEditor.js
index 75d04e0c2d..c1101e9e6d 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconTextEditorExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleTextEditor.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconTextEditorExample = () => (
+const IconExampleTextEditor = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='align center' />
@@ -122,4 +122,4 @@ const IconTextEditorExample = () => (
   </Grid>
 )
 
-export default IconTextEditorExample
+export default IconExampleTextEditor
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconUserActionsExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleUserActions.js
similarity index 98%
rename from docs/app/Examples/elements/Icon/IconSet/IconUserActionsExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleUserActions.js
index af39441047..92517649b0 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconUserActionsExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleUserActions.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconUserActionsExample = () => (
+const IconExampleUserActions = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='add to cart' />
@@ -238,4 +238,4 @@ const IconUserActionsExample = () => (
   </Grid>
 )
 
-export default IconUserActionsExample
+export default IconExampleUserActions
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconUserTypesExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleUserTypes.js
similarity index 90%
rename from docs/app/Examples/elements/Icon/IconSet/IconUserTypesExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleUserTypes.js
index 49b868c2a0..e5de332566 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconUserTypesExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleUserTypes.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconUserTypesExample = () => (
+const IconExampleUserTypes = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='child' />
@@ -34,4 +34,4 @@ const IconUserTypesExample = () => (
   </Grid>
 )
 
-export default IconUserTypesExample
+export default IconExampleUserTypes
diff --git a/docs/app/Examples/elements/Icon/IconSet/IconWebContentExample.js b/docs/app/Examples/elements/Icon/IconSet/IconExampleWebContent.js
similarity index 98%
rename from docs/app/Examples/elements/Icon/IconSet/IconWebContentExample.js
rename to docs/app/Examples/elements/Icon/IconSet/IconExampleWebContent.js
index 51f7018600..44ee4bc01a 100644
--- a/docs/app/Examples/elements/Icon/IconSet/IconWebContentExample.js
+++ b/docs/app/Examples/elements/Icon/IconSet/IconExampleWebContent.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Grid, Icon } from 'semantic-ui-react'
 
-const IconWebContentExample = () => (
+const IconExampleWebContent = () => (
   <Grid columns='5' doubling>
     <Grid.Column>
       <Icon name='add to calendar' />
@@ -286,4 +286,4 @@ const IconWebContentExample = () => (
   </Grid>
 )
 
-export default IconWebContentExample
+export default IconExampleWebContent
diff --git a/docs/app/Examples/elements/Icon/IconSet/index.js b/docs/app/Examples/elements/Icon/IconSet/index.js
index 7fd0d0c7ca..93d1c8d360 100644
--- a/docs/app/Examples/elements/Icon/IconSet/index.js
+++ b/docs/app/Examples/elements/Icon/IconSet/index.js
@@ -6,123 +6,123 @@ const IconSetExamples = () => (
   <ExampleSection title='Icon Set' className='icon-set-examples'>
     <ComponentExample
       title='Web Content'
-      description='Icons can represent types of content found on websites'
-      examplePath='elements/Icon/IconSet/IconWebContentExample'
+      description='Icons can represent types of content found on websites.'
+      examplePath='elements/Icon/IconSet/IconExampleWebContent'
     />
     <ComponentExample
       title='User Actions'
-      description='Icons can represent common actions a user can take'
-      examplePath='elements/Icon/IconSet/IconUserActionsExample'
+      description='Icons can represent common actions a user can take.'
+      examplePath='elements/Icon/IconSet/IconExampleUserActions'
     />
     <ComponentExample
       title='Message'
-      description='Icons can alert users to the type of message being displayed'
-      examplePath='elements/Icon/IconSet/IconMessageExample'
+      description='Icons can alert users to the type of message being displayed.'
+      examplePath='elements/Icon/IconSet/IconExampleMessage'
     />
     <ComponentExample
       title='User Types'
-      description='Icons can represent types of people'
-      examplePath='elements/Icon/IconSet/IconUserTypesExample'
+      description='Icons can represent types of people.'
+      examplePath='elements/Icon/IconSet/IconExampleUserTypes'
     />
     <ComponentExample
       title='Gender & Sexuality'
-      description='Icons can represent genders or types of sexuality'
-      examplePath='elements/Icon/IconSet/IconGenderAndSexualityExample'
+      description='Icons can represent genders or types of sexuality.'
+      examplePath='elements/Icon/IconSet/IconExampleGenderAndSexuality'
     />
     <ComponentExample
       title='Layout Adjustment'
-      description='Icons can alert users to common ways to adjust page layouts'
-      examplePath='elements/Icon/IconSet/IconLayoutAdjustmentExample'
+      description='Icons can alert users to common ways to adjust page layouts.'
+      examplePath='elements/Icon/IconSet/IconExampleLayoutAdjustment'
     />
     <ComponentExample
       title='Objects'
-      description='Icons can be used to represent common objects'
-      examplePath='elements/Icon/IconSet/IconObjectsExample'
+      description='Icons can be used to represent common objects.'
+      examplePath='elements/Icon/IconSet/IconExampleObjects'
     />
     <ComponentExample
       title='Shapes'
-      description='Icons can be used to create shapes'
-      examplePath='elements/Icon/IconSet/IconShapesExample'
+      description='Icons can be used to create shapes.'
+      examplePath='elements/Icon/IconSet/IconExampleShapes'
     />
     <ComponentExample
       title='Item Selection'
-      description='Icons can show whether an item is included in a set'
-      examplePath='elements/Icon/IconSet/IconItemSelectionExample'
+      description='Icons can show whether an item is included in a set.'
+      examplePath='elements/Icon/IconSet/IconExampleItemSelection'
     />
     <ComponentExample
       title='Media'
-      description='Icons can represent common media types'
-      examplePath='elements/Icon/IconSet/IconMediaExample'
+      description='Icons can represent common media types.'
+      examplePath='elements/Icon/IconSet/IconExampleMedia'
     />
     <ComponentExample
       title='Pointers'
-      description='Icons can be used to indicate a direction'
-      examplePath='elements/Icon/IconSet/IconPointersExample'
+      description='Icons can be used to indicate a direction.'
+      examplePath='elements/Icon/IconSet/IconExamplePointers'
     />
     <ComponentExample
       title='Mobile'
       description='Icons can represent mobile devices, types of content found on mobile devices.'
-      examplePath='elements/Icon/IconSet/IconMobileExample'
+      examplePath='elements/Icon/IconSet/IconExampleMobile'
     />
     <ComponentExample
       title='Computer'
       description='Icons can represent computing devices, or types of content found on a computer.'
-      examplePath='elements/Icon/IconSet/IconComputerExample'
+      examplePath='elements/Icon/IconSet/IconExampleComputer'
     />
     <ComponentExample
       title='Computer and File System'
-      description='Icons can represent elements of a computer and its file system'
-      examplePath='elements/Icon/IconSet/IconComputerAndFileSystemExample'
+      description='Icons can represent elements of a computer and its file system.'
+      examplePath='elements/Icon/IconSet/IconExampleComputerAndFileSystem'
     />
     <ComponentExample
       title='Technologies'
-      description='Icons can represent common technologies'
-      examplePath='elements/Icon/IconSet/IconTechnologiesExample'
+      description='Icons can represent common technologies.'
+      examplePath='elements/Icon/IconSet/IconExampleTechnologies'
     />
     <ComponentExample
       title='Rating'
-      description='Icons can be used to represent users attitude towards content'
-      examplePath='elements/Icon/IconSet/IconRatingExample'
+      description='Icons can be used to represent users attitude towards content.'
+      examplePath='elements/Icon/IconSet/IconExampleRating'
     />
     <ComponentExample
       title='Audio'
-      description='Icons can be used to represent common ways to interact with audio'
-      examplePath='elements/Icon/IconSet/IconAudioExample'
+      description='Icons can be used to represent common ways to interact with audio.'
+      examplePath='elements/Icon/IconSet/IconExampleAudio'
     />
     <ComponentExample
       title='Map'
-      description='Icons can be used to represent elements on a map'
-      examplePath='elements/Icon/IconSet/IconMapExample'
+      description='Icons can be used to represent elements on a map.'
+      examplePath='elements/Icon/IconSet/IconExampleMap'
     />
     <ComponentExample
       title='Tables'
-      description='Icons can be used to represent common actions inside a table'
-      examplePath='elements/Icon/IconSet/IconTablesExample'
+      description='Icons can be used to represent common actions inside a table.'
+      examplePath='elements/Icon/IconSet/IconExampleTables'
     />
     <ComponentExample
       title='Text Editor'
-      description='Icons can represent common actions when editing text'
-      examplePath='elements/Icon/IconSet/IconTextEditorExample'
+      description='Icons can represent common actions when editing text.'
+      examplePath='elements/Icon/IconSet/IconExampleTextEditor'
     />
     <ComponentExample
       title='Currency'
-      description='Icons can represent units of currency'
-      examplePath='elements/Icon/IconSet/IconCurrencyExample'
+      description='Icons can represent units of currency.'
+      examplePath='elements/Icon/IconSet/IconExampleCurrency'
     />
     <ComponentExample
       title='Payment Options'
-      description='Icons can represent common forms of payment'
-      examplePath='elements/Icon/IconSet/IconPaymentOptionsExample'
+      description='Icons can represent common forms of payment.'
+      examplePath='elements/Icon/IconSet/IconExamplePaymentOptions'
     />
     <ComponentExample
       title='Accessibility'
-      description='Icons can represent accessibility standards'
-      examplePath='elements/Icon/IconSet/IconAccessibilityExample'
+      description='Icons can represent accessibility standards.'
+      examplePath='elements/Icon/IconSet/IconExampleAccessibility'
     />
     <ComponentExample
       title='Brands'
-      description='Icons can represent logos to common brands'
-      examplePath='elements/Icon/IconSet/IconBrandsExample'
+      description='Icons can represent logos to common brands.'
+      examplePath='elements/Icon/IconSet/IconExampleBrands'
     />
   </ExampleSection>
 )
diff --git a/docs/app/Examples/elements/Icon/States/IconDisabledExample.js b/docs/app/Examples/elements/Icon/States/IconDisabledExample.js
deleted file mode 100644
index 63a20ac5a9..0000000000
--- a/docs/app/Examples/elements/Icon/States/IconDisabledExample.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React, { Component } from 'react'
-import { Icon } from 'semantic-ui-react'
-
-export default class IconDisabledExample extends Component {
-  render() {
-    return (
-      <Icon disabled name='users' />
-    )
-  }
-}
diff --git a/docs/app/Examples/elements/Icon/States/IconExampleDisabled.js b/docs/app/Examples/elements/Icon/States/IconExampleDisabled.js
new file mode 100644
index 0000000000..9477871b32
--- /dev/null
+++ b/docs/app/Examples/elements/Icon/States/IconExampleDisabled.js
@@ -0,0 +1,8 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+
+const IconExampleDisabled = () => (
+  <Icon disabled name='users' />
+)
+
+export default IconExampleDisabled
diff --git a/docs/app/Examples/elements/Icon/States/IconExampleLoading.js b/docs/app/Examples/elements/Icon/States/IconExampleLoading.js
new file mode 100644
index 0000000000..8a6e796661
--- /dev/null
+++ b/docs/app/Examples/elements/Icon/States/IconExampleLoading.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+
+const IconExampleLoading = () => (
+  <div>
+    <Icon loading name='spinner' />
+    <Icon loading name='certificate' />
+    <Icon loading name='asterisk' />
+  </div>
+)
+
+export default IconExampleLoading
diff --git a/docs/app/Examples/elements/Icon/States/IconLoadingExample.js b/docs/app/Examples/elements/Icon/States/IconLoadingExample.js
deleted file mode 100644
index 53156f4585..0000000000
--- a/docs/app/Examples/elements/Icon/States/IconLoadingExample.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Component } from 'react'
-import { Icon } from 'semantic-ui-react'
-
-export default class IconLoadingExample extends Component {
-  render() {
-    return (
-      <div>
-        <Icon loading name='spinner' />
-        <Icon loading name='certificate' />
-        <Icon loading name='asterisk' />
-      </div>
-    )
-  }
-}
diff --git a/docs/app/Examples/elements/Icon/States/index.js b/docs/app/Examples/elements/Icon/States/index.js
index 14bfd86c91..3b49356151 100644
--- a/docs/app/Examples/elements/Icon/States/index.js
+++ b/docs/app/Examples/elements/Icon/States/index.js
@@ -1,22 +1,20 @@
-import React, { Component } from 'react'
+import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-export default class IconStatesExamples extends Component {
-  render() {
-    return (
-      <ExampleSection title='States'>
-        <ComponentExample
-          title='Disabled'
-          description='An icon can show that it is disabled'
-          examplePath='elements/Icon/States/IconDisabledExample'
-        />
-        <ComponentExample
-          title='Loading'
-          description='An icon can be used as a simple loader'
-          examplePath='elements/Icon/States/IconLoadingExample'
-        />
-      </ExampleSection>
-    )
-  }
-}
+const IconStatesExamples = () => (
+  <ExampleSection title='States'>
+    <ComponentExample
+      title='Disabled'
+      description='An icon can show that it is disabled.'
+      examplePath='elements/Icon/States/IconExampleDisabled'
+    />
+    <ComponentExample
+      title='Loading'
+      description='An icon can be used as a simple loader.'
+      examplePath='elements/Icon/States/IconExampleLoading'
+    />
+  </ExampleSection>
+)
+
+export default IconStatesExamples
diff --git a/docs/app/Examples/elements/Icon/Variations/IconBorderedExample.js b/docs/app/Examples/elements/Icon/Variations/IconBorderedExample.js
deleted file mode 100644
index b737eea242..0000000000
--- a/docs/app/Examples/elements/Icon/Variations/IconBorderedExample.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { Component } from 'react'
-import { Icon } from 'semantic-ui-react'
-
-export default class IconBorderedExample extends Component {
-  render() {
-    return (
-      <div>
-        <Icon bordered name='users' />
-        <Icon bordered color='teal' name='users' />
-        <Icon bordered inverted color='black' name='users' />
-        <Icon bordered inverted color='teal' name='users' />
-      </div>
-    )
-  }
-}
diff --git a/docs/app/Examples/elements/Icon/Variations/IconCircularExample.js b/docs/app/Examples/elements/Icon/Variations/IconCircularExample.js
deleted file mode 100644
index 242ed1fe58..0000000000
--- a/docs/app/Examples/elements/Icon/Variations/IconCircularExample.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import React, { Component } from 'react'
-import { Icon } from 'semantic-ui-react'
-
-export default class IconCircularExample extends Component {
-  render() {
-    return (
-      <div>
-        <Icon circular name='users' />
-        <Icon circular color='teal' name='users' />
-        <Icon circular inverted name='users' />
-        <Icon circular inverted color='teal' name='users' />
-      </div>
-    )
-  }
-}
diff --git a/docs/app/Examples/elements/Icon/Variations/IconColoredExample.js b/docs/app/Examples/elements/Icon/Variations/IconColoredExample.js
deleted file mode 100644
index 1f4c336685..0000000000
--- a/docs/app/Examples/elements/Icon/Variations/IconColoredExample.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { Component } from 'react'
-import { Icon } from 'semantic-ui-react'
-
-export default class IconColoredExample extends Component {
-  render() {
-    return (
-      <div>
-        <Icon color='red' name='users' />
-        <Icon color='orange' name='users' />
-        <Icon color='yellow' name='users' />
-        <Icon color='olive' name='users' />
-        <Icon color='green' name='users' />
-        <Icon color='teal' name='users' />
-        <Icon color='blue' name='users' />
-        <Icon color='violet' name='users' />
-        <Icon color='purple' name='users' />
-        <Icon color='pink' name='users' />
-        <Icon color='brown' name='users' />
-        <Icon color='grey' name='users' />
-        <Icon color='black' name='users' />
-      </div>
-    )
-  }
-}
diff --git a/docs/app/Examples/elements/Icon/Variations/IconExampleBordered.js b/docs/app/Examples/elements/Icon/Variations/IconExampleBordered.js
new file mode 100644
index 0000000000..ae7fbc4156
--- /dev/null
+++ b/docs/app/Examples/elements/Icon/Variations/IconExampleBordered.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+
+const IconExampleBordered = () => (
+  <div>
+    <Icon bordered name='users' />
+    <Icon bordered color='teal' name='users' />
+    <Icon bordered inverted color='black' name='users' />
+    <Icon bordered inverted color='teal' name='users' />
+  </div>
+)
+
+export default IconExampleBordered
diff --git a/docs/app/Examples/elements/Icon/Variations/IconExampleCircular.js b/docs/app/Examples/elements/Icon/Variations/IconExampleCircular.js
new file mode 100644
index 0000000000..67d52d52a8
--- /dev/null
+++ b/docs/app/Examples/elements/Icon/Variations/IconExampleCircular.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+
+const IconExampleCircular = () => (
+  <div>
+    <Icon circular name='users' />
+    <Icon circular color='teal' name='users' />
+    <Icon circular inverted name='users' />
+    <Icon circular inverted color='teal' name='users' />
+  </div>
+)
+
+export default IconExampleCircular
diff --git a/docs/app/Examples/elements/Icon/Variations/IconExampleColored.js b/docs/app/Examples/elements/Icon/Variations/IconExampleColored.js
new file mode 100644
index 0000000000..31d28f0a16
--- /dev/null
+++ b/docs/app/Examples/elements/Icon/Variations/IconExampleColored.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+
+const IconExampleColored = () => (
+  <div>
+    <Icon color='red' name='users' />
+    <Icon color='orange' name='users' />
+    <Icon color='yellow' name='users' />
+    <Icon color='olive' name='users' />
+    <Icon color='green' name='users' />
+    <Icon color='teal' name='users' />
+    <Icon color='blue' name='users' />
+    <Icon color='violet' name='users' />
+    <Icon color='purple' name='users' />
+    <Icon color='pink' name='users' />
+    <Icon color='brown' name='users' />
+    <Icon color='grey' name='users' />
+    <Icon color='black' name='users' />
+  </div>
+)
+
+export default IconExampleColored
diff --git a/docs/app/Examples/elements/Icon/Variations/IconExampleFitted.js b/docs/app/Examples/elements/Icon/Variations/IconExampleFitted.js
new file mode 100644
index 0000000000..243850155a
--- /dev/null
+++ b/docs/app/Examples/elements/Icon/Variations/IconExampleFitted.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+
+const IconExampleFitted = () => (
+  <div>
+    <p>Tight spacing</p>
+    <Icon fitted name='help' />
+    <p>Tight spacing</p>
+  </div>
+)
+
+export default IconExampleFitted
diff --git a/docs/app/Examples/elements/Icon/Variations/IconExampleFlipped.js b/docs/app/Examples/elements/Icon/Variations/IconExampleFlipped.js
new file mode 100644
index 0000000000..615e09d0fe
--- /dev/null
+++ b/docs/app/Examples/elements/Icon/Variations/IconExampleFlipped.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+
+const IconExampleFlipped = () => (
+  <div>
+    <Icon flipped='horizontally' name='cloud' />
+    <Icon flipped='vertically' name='cloud' />
+  </div>
+)
+
+export default IconExampleFlipped
diff --git a/docs/app/Examples/elements/Icon/Variations/IconExampleInvertedColored.js b/docs/app/Examples/elements/Icon/Variations/IconExampleInvertedColored.js
new file mode 100644
index 0000000000..8ccdbe0a1a
--- /dev/null
+++ b/docs/app/Examples/elements/Icon/Variations/IconExampleInvertedColored.js
@@ -0,0 +1,22 @@
+import React from 'react'
+import { Segment, Icon } from 'semantic-ui-react'
+
+const IconExampleInvertedColored = () => (
+  <Segment inverted>
+    <Icon inverted color='red' name='users' />
+    <Icon inverted color='orange' name='users' />
+    <Icon inverted color='yellow' name='users' />
+    <Icon inverted color='olive' name='users' />
+    <Icon inverted color='green' name='users' />
+    <Icon inverted color='teal' name='users' />
+    <Icon inverted color='blue' name='users' />
+    <Icon inverted color='violet' name='users' />
+    <Icon inverted color='purple' name='users' />
+    <Icon inverted color='pink' name='users' />
+    <Icon inverted color='brown' name='users' />
+    <Icon inverted color='grey' name='users' />
+    <Icon inverted color='black' name='users' />
+  </Segment>
+)
+
+export default IconExampleInvertedColored
diff --git a/docs/app/Examples/elements/Icon/Variations/IconExampleLink.js b/docs/app/Examples/elements/Icon/Variations/IconExampleLink.js
new file mode 100644
index 0000000000..29377b4ac7
--- /dev/null
+++ b/docs/app/Examples/elements/Icon/Variations/IconExampleLink.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+
+const IconExampleLink = () => (
+  <div>
+    <Icon link name='close' />
+    <Icon link name='help' />
+  </div>
+)
+
+export default IconExampleLink
diff --git a/docs/app/Examples/elements/Icon/Variations/IconExampleRotated.js b/docs/app/Examples/elements/Icon/Variations/IconExampleRotated.js
new file mode 100644
index 0000000000..75c2680ec1
--- /dev/null
+++ b/docs/app/Examples/elements/Icon/Variations/IconExampleRotated.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+
+const IconExampleRotated = () => (
+  <div>
+    <Icon rotated='clockwise' name='cloud' />
+    <Icon rotated='counterclockwise' name='cloud' />
+  </div>
+)
+
+export default IconExampleRotated
diff --git a/docs/app/Examples/elements/Icon/Variations/IconExampleSize.js b/docs/app/Examples/elements/Icon/Variations/IconExampleSize.js
new file mode 100644
index 0000000000..04e1d83289
--- /dev/null
+++ b/docs/app/Examples/elements/Icon/Variations/IconExampleSize.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import { Icon } from 'semantic-ui-react'
+
+const IconExampleSize = () => (
+  <div>
+    <Icon name='home' size='mini' />
+    <Icon name='home' size='tiny' />
+    <Icon name='home' size='small' />
+    <Icon name='home' size='small' />
+    <br />
+    <Icon name='home' />
+    <br />
+    <Icon name='home' size='large' />
+    <br />
+    <Icon name='home' size='big' />
+    <br />
+    <Icon name='home' size='huge' />
+    <br />
+    <Icon name='home' size='massive' />
+  </div>
+)
+
+export default IconExampleSize
diff --git a/docs/app/Examples/elements/Icon/Variations/IconFittedExample.js b/docs/app/Examples/elements/Icon/Variations/IconFittedExample.js
deleted file mode 100644
index acc0aae7b7..0000000000
--- a/docs/app/Examples/elements/Icon/Variations/IconFittedExample.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import React, { Component } from 'react'
-import { Icon } from 'semantic-ui-react'
-
-export default class IconFittedExample extends Component {
-  render() {
-    return (
-      <div>
-        <p>Tight spacing</p>
-        <Icon fitted name='help' />
-        <p>Tight spacing</p>
-      </div>
-    )
-  }
-}
diff --git a/docs/app/Examples/elements/Icon/Variations/IconFlippedExample.js b/docs/app/Examples/elements/Icon/Variations/IconFlippedExample.js
deleted file mode 100644
index bc80deac09..0000000000
--- a/docs/app/Examples/elements/Icon/Variations/IconFlippedExample.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { Component } from 'react'
-import { Icon } from 'semantic-ui-react'
-
-export default class IconFlippedExample extends Component {
-  render() {
-    return (
-      <div>
-        <Icon flipped='horizontally' name='cloud' />
-        <Icon flipped='vertically' name='cloud' />
-      </div>
-    )
-  }
-}
diff --git a/docs/app/Examples/elements/Icon/Variations/IconInvertedColoredExample.js b/docs/app/Examples/elements/Icon/Variations/IconInvertedColoredExample.js
deleted file mode 100644
index 25b0ae1d41..0000000000
--- a/docs/app/Examples/elements/Icon/Variations/IconInvertedColoredExample.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import React, { Component } from 'react'
-import { Segment, Icon } from 'semantic-ui-react'
-
-export default class IconInvertedColoredExample extends Component {
-  render() {
-    return (
-      <Segment inverted>
-        <Icon inverted color='red' name='users' />
-        <Icon inverted color='orange' name='users' />
-        <Icon inverted color='yellow' name='users' />
-        <Icon inverted color='olive' name='users' />
-        <Icon inverted color='green' name='users' />
-        <Icon inverted color='teal' name='users' />
-        <Icon inverted color='blue' name='users' />
-        <Icon inverted color='violet' name='users' />
-        <Icon inverted color='purple' name='users' />
-        <Icon inverted color='pink' name='users' />
-        <Icon inverted color='brown' name='users' />
-        <Icon inverted color='grey' name='users' />
-        <Icon inverted color='black' name='users' />
-      </Segment>
-    )
-  }
-}
diff --git a/docs/app/Examples/elements/Icon/Variations/IconLinkExample.js b/docs/app/Examples/elements/Icon/Variations/IconLinkExample.js
deleted file mode 100644
index f3d9b0ccef..0000000000
--- a/docs/app/Examples/elements/Icon/Variations/IconLinkExample.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { Component } from 'react'
-import { Icon } from 'semantic-ui-react'
-
-export default class IconLinkExample extends Component {
-  render() {
-    return (
-      <div>
-        <Icon link name='close' />
-        <Icon link name='help' />
-      </div>
-    )
-  }
-}
diff --git a/docs/app/Examples/elements/Icon/Variations/IconRotatedExample.js b/docs/app/Examples/elements/Icon/Variations/IconRotatedExample.js
deleted file mode 100644
index 1a3faf71c0..0000000000
--- a/docs/app/Examples/elements/Icon/Variations/IconRotatedExample.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import React, { Component } from 'react'
-import { Icon } from 'semantic-ui-react'
-
-export default class IconRotatedExample extends Component {
-  render() {
-    return (
-      <div>
-        <Icon rotated='clockwise' name='cloud' />
-        <Icon rotated='counterclockwise' name='cloud' />
-      </div>
-    )
-  }
-}
diff --git a/docs/app/Examples/elements/Icon/Variations/IconSizeExample.js b/docs/app/Examples/elements/Icon/Variations/IconSizeExample.js
deleted file mode 100644
index 91b7171993..0000000000
--- a/docs/app/Examples/elements/Icon/Variations/IconSizeExample.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, { Component } from 'react'
-import { Icon } from 'semantic-ui-react'
-
-export default class IconSizeExample extends Component {
-  render() {
-    return (
-      <div>
-        <Icon name='home' size='mini' />
-        <Icon name='home' size='tiny' />
-        <Icon name='home' size='small' />
-        <Icon name='home' size='small' />
-        <br />
-        <Icon name='home' />
-        <br />
-        <Icon name='home' size='large' />
-        <br />
-        <Icon name='home' size='big' />
-        <br />
-        <Icon name='home' size='huge' />
-        <br />
-        <Icon name='home' size='massive' />
-      </div>
-    )
-  }
-}
diff --git a/docs/app/Examples/elements/Icon/Variations/index.js b/docs/app/Examples/elements/Icon/Variations/index.js
index 72b6a77ddb..3cd4cd3a27 100644
--- a/docs/app/Examples/elements/Icon/Variations/index.js
+++ b/docs/app/Examples/elements/Icon/Variations/index.js
@@ -1,57 +1,55 @@
-import React, { Component } from 'react'
+import React from 'react'
 import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
 import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
 
-export default class IconVariationsExamples extends Component {
-  render() {
-    return (
-      <ExampleSection title='Variations'>
-        <ComponentExample
-          title='Fitted'
-          description='An icon can be fitted, without any space to the left or right of it.'
-          examplePath='elements/Icon/Variations/IconFittedExample'
-        />
-        <ComponentExample
-          title='Size'
-          description='An icon can vary in size'
-          examplePath='elements/Icon/Variations/IconSizeExample'
-        />
-        <ComponentExample
-          title='Link'
-          description='An icon can be formatted as a link'
-          examplePath='elements/Icon/Variations/IconLinkExample'
-        />
-        <ComponentExample
-          title='Flipped'
-          description='An icon can be flipped'
-          examplePath='elements/Icon/Variations/IconFlippedExample'
-        />
-        <ComponentExample
-          title='Rotated'
-          description='An icon can be rotated'
-          examplePath='elements/Icon/Variations/IconRotatedExample'
-        />
-        <ComponentExample
-          title='Circular'
-          description='An icon can be formatted to appear circular'
-          examplePath='elements/Icon/Variations/IconCircularExample'
-        />
-        <ComponentExample
-          title='Bordered'
-          description='An icon can be formatted to appear bordered'
-          examplePath='elements/Icon/Variations/IconBorderedExample'
-        />
-        <ComponentExample
-          title='Colored'
-          description='An icon can be formatted with different colors'
-          examplePath='elements/Icon/Variations/IconColoredExample'
-        />
-        <ComponentExample
-          title='Inverted'
-          description='An icon can have its colors inverted for contrast'
-          examplePath='elements/Icon/Variations/IconInvertedColoredExample'
-        />
-      </ExampleSection>
-    )
-  }
-}
+const IconVariationsExamples = () => (
+  <ExampleSection title='Variations'>
+    <ComponentExample
+      title='Fitted'
+      description='An icon can be fitted, without any space to the left or right of it.'
+      examplePath='elements/Icon/Variations/IconExampleFitted'
+    />
+    <ComponentExample
+      title='Size'
+      description='An icon can vary in size.'
+      examplePath='elements/Icon/Variations/IconExampleSize'
+    />
+    <ComponentExample
+      title='Link'
+      description='An icon can be formatted as a link.'
+      examplePath='elements/Icon/Variations/IconExampleLink'
+    />
+    <ComponentExample
+      title='Flipped'
+      description='An icon can be flipped.'
+      examplePath='elements/Icon/Variations/IconExampleFlipped'
+    />
+    <ComponentExample
+      title='Rotated'
+      description='An icon can be rotated.'
+      examplePath='elements/Icon/Variations/IconExampleRotated'
+    />
+    <ComponentExample
+      title='Circular'
+      description='An icon can be formatted to appear circular.'
+      examplePath='elements/Icon/Variations/IconExampleCircular'
+    />
+    <ComponentExample
+      title='Bordered'
+      description='An icon can be formatted to appear bordered.'
+      examplePath='elements/Icon/Variations/IconExampleBordered'
+    />
+    <ComponentExample
+      title='Colored'
+      description='An icon can be formatted with different colors.'
+      examplePath='elements/Icon/Variations/IconExampleColored'
+    />
+    <ComponentExample
+      title='Inverted'
+      description='An icon can have its colors inverted for contrast.'
+      examplePath='elements/Icon/Variations/IconExampleInvertedColored'
+    />
+  </ExampleSection>
+)
+
+export default IconVariationsExamples
diff --git a/docs/app/Examples/elements/Icon/index.js b/docs/app/Examples/elements/Icon/index.js
index 0af311daad..7f3026aaea 100644
--- a/docs/app/Examples/elements/Icon/index.js
+++ b/docs/app/Examples/elements/Icon/index.js
@@ -1,18 +1,16 @@
-import React, { Component } from 'react'
+import React from 'react'
 import IconSet from './IconSet'
 import States from './States'
 import Variations from './Variations'
 import Groups from './Groups'
 
-export default class IconExamples extends Component {
-  render() {
-    return (
-      <div>
-        <IconSet />
-        <States />
-        <Variations />
-        <Groups />
-      </div>
-    )
-  }
-}
+const IconExamples = () => (
+  <div>
+    <IconSet />
+    <States />
+    <Variations />
+    <Groups />
+  </div>
+)
+
+export default IconExamples