diff --git a/CHANGELOG.md b/CHANGELOG.md
index 92c68bfc44..f4fa7397af 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -31,6 +31,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Documentation
 - Restore docs for `Ref` component @layershifter ([#1777](https://github.com/stardust-ui/react/pull/1777))
 - Add prototype for expandable control messages in `Chat` @sophieH29 ([#1765](https://github.com/stardust-ui/react/pull/1765))
+- Remove Font Awesome icons from docs examples @lucivpav ([#1764](https://github.com/stardust-ui/react/pull/1764))
 
 <!--------------------------------[ v0.36.1 ]------------------------------- -->
 ## [v0.36.1](https://github.com/stardust-ui/react/tree/v0.36.1) (2019-08-09)
diff --git a/docs/src/examples/components/Accordion/Usage/AccordionPanelCustomTitleExample.shorthand.tsx b/docs/src/examples/components/Accordion/Usage/AccordionPanelCustomTitleExample.shorthand.tsx
index 0033aeb444..9e334a5051 100644
--- a/docs/src/examples/components/Accordion/Usage/AccordionPanelCustomTitleExample.shorthand.tsx
+++ b/docs/src/examples/components/Accordion/Usage/AccordionPanelCustomTitleExample.shorthand.tsx
@@ -7,7 +7,7 @@ const AccordionPanelCustomTitleExample = () => {
       title: (
         <Layout
           key="title"
-          start={<Label icon="warning circle" iconPosition="start" circular content="Warnings" />}
+          start={<Label icon="error" iconPosition="start" circular content="Warnings" />}
         />
       ),
       content: {
diff --git a/docs/src/examples/components/Animation/Types/AnimationExample.tsx b/docs/src/examples/components/Animation/Types/AnimationExample.tsx
index c4ef960f4e..3007eae98b 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExample.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExample.tsx
@@ -17,7 +17,7 @@ const spinner = {
 const AnimationExample = () => (
   <Provider theme={{ animations: { spinner } }}>
     <Animation name="spinner">
-      <Icon name="umbrella" circular bordered />
+      <Icon name="mention" circular bordered />
     </Animation>
   </Provider>
 )
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx
index 69e87858c1..969a1db88e 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleDelay.tsx
@@ -20,7 +20,7 @@ const AnimationExampleDelay = () => (
     <br />
     <Provider theme={{ animations: { spinner } }}>
       <Animation name="spinner" delay="5s">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
     </Provider>
   </div>
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx
index 1fe4beeb2e..1bd2fb1205 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleDirection.tsx
@@ -22,16 +22,16 @@ const AnimationExampleDirection = () => (
       <Text content="Alternate" />
       <Text content="Alternate reverse" />
       <Animation name="spinner">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" direction="reverse">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" direction="alternate">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" direction="alternate-reverse">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
     </Grid>
   </Provider>
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx
index d32ef096b4..609c71fed0 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleDuration.tsx
@@ -17,7 +17,7 @@ const spinner = {
 const AnimationExampleDuration = () => (
   <Provider theme={{ animations: { spinner } }}>
     <Animation name="spinner" duration="1s">
-      <Icon name="umbrella" circular bordered />
+      <Icon name="mention" circular bordered />
     </Animation>
   </Provider>
 )
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx
index 7a33ec8380..9fd1f4addc 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleFillMode.tsx
@@ -18,16 +18,16 @@ const AnimationExampleFillMode = () => (
       <Text content="Backwards" />
       <Text content="Both" />
       <Animation name="colorChanger" fillMode="none" delay="3s" iterationCount="1">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="colorChanger" fillMode="forwards" delay="3s" iterationCount="1">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="colorChanger" fillMode="backwards" delay="3s" iterationCount="1">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="colorChanger" fillMode="both" delay="3s" iterationCount="1">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
     </Grid>
   </Provider>
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx
index 90b6ef3d9c..3fceee6cbe 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleIterationCount.tsx
@@ -22,16 +22,16 @@ const AnimationExampleIterationCount = () => (
       <Text content="5 iterations" />
       <Text content="Infinite" />
       <Animation name="spinner" iterationCount="1">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" iterationCount="2">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" iterationCount="5">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" iterationCount="infinite">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
     </Grid>
   </Provider>
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleKeyframeParams.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleKeyframeParams.tsx
index 8c3a029a88..ecee2508f9 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleKeyframeParams.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleKeyframeParams.tsx
@@ -19,13 +19,13 @@ const AnimationExample = () => (
   <Provider theme={{ animations: { colorChanger } }}>
     <Flex gap="gap.smaller">
       <Animation name="colorChanger">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="colorChanger" keyframeParams={{ fromColor: 'green', toColor: 'yellow' }}>
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="colorChanger" keyframeParams={{ toColor: 'black' }}>
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
     </Flex>
   </Provider>
diff --git a/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx b/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx
index 38c16ee140..1b37902256 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExamplePlayState.tsx
@@ -38,7 +38,7 @@ class AnimationExamplePlayState extends React.Component {
           <br />
           <br />
           <Animation name="spinner" playState={this.state.playState}>
-            <Icon name="umbrella" circular bordered />
+            <Icon name="mention" circular bordered />
           </Animation>
         </div>
       </Provider>
diff --git a/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx b/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx
index aa18dacac4..242b115358 100644
--- a/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx
+++ b/docs/src/examples/components/Animation/Types/AnimationExampleTimingFunction.tsx
@@ -24,22 +24,22 @@ const AnimationExampleTimingFunction = () => (
       <Text content="Ease in out" />
       <Text content="Cubic bezier" />
       <Animation name="spinner" timingFunction="ease">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="linear">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="ease-in">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="ease-out">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="ease-in-out">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
       <Animation name="spinner" timingFunction="cubic-bezier(0.1, 0.5, 0.1, 0.5)">
-        <Icon name="umbrella" circular bordered />
+        <Icon name="mention" circular bordered />
       </Animation>
     </Grid>
   </Provider>
diff --git a/docs/src/examples/components/Avatar/Rtl/AvatarExample.rtl.tsx b/docs/src/examples/components/Avatar/Rtl/AvatarExample.rtl.tsx
index d4e0501bbe..286430c532 100644
--- a/docs/src/examples/components/Avatar/Rtl/AvatarExample.rtl.tsx
+++ b/docs/src/examples/components/Avatar/Rtl/AvatarExample.rtl.tsx
@@ -6,7 +6,7 @@ const AvatarExampleRtl = () => (
     name="جون دو"
     status={{
       color: 'green',
-      icon: 'check',
+      icon: 'stardust-checkmark',
     }}
   />
 )
diff --git a/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx b/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx
index 5ae6eaf637..61e477af92 100644
--- a/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Usage/AvatarUsageExample.shorthand.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Avatar } from '@stardust-ui/react'
 
-const status = { color: 'green', icon: 'check', title: 'Available' }
+const status = { color: 'green', icon: 'stardust-checkmark', title: 'Available' }
 
 const AvatarUsageExampleShorthand = () => (
   <div>
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleExcludedInitials.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleExcludedInitials.shorthand.tsx
index 19b14abdbb..4725e8ac32 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleExcludedInitials.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleExcludedInitials.shorthand.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Avatar } from '@stardust-ui/react'
 
-const status = { color: 'green', icon: 'check', title: 'Available' }
+const status = { color: 'green', icon: 'stardust-checkmark', title: 'Available' }
 
 const AvatarExampleExcludedInitialsShorthand = () => (
   <div>
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleGetInitials.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleGetInitials.shorthand.tsx
index f9da55f38b..acdf9169b0 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleGetInitials.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleGetInitials.shorthand.tsx
@@ -7,7 +7,7 @@ const AvatarExampleGetInitialsShorthand = () => (
   <Avatar
     name="John Doe"
     getInitials={getInitials}
-    status={{ color: 'green', icon: 'check', title: 'Available' }}
+    status={{ color: 'green', icon: 'stardust-checkmark', title: 'Available' }}
   />
 )
 
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
index ab8f3668c6..adf8fa9f30 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
@@ -5,12 +5,12 @@ const AvatarExampleImageCustomizationShorthand = () => (
   <>
     <Avatar
       image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of John Doe' }}
-      status={{ color: 'green', icon: 'check', title: 'Available' }}
+      status={{ color: 'green', icon: 'stardust-checkmark', title: 'Available' }}
     />
     &emsp;
     <Avatar
       image="public/images/avatar/large/jerry.png"
-      status={{ color: 'green', icon: 'check', title: 'Available' }}
+      status={{ color: 'green', icon: 'stardust-checkmark', title: 'Available' }}
     />
     &emsp;
     <Avatar
@@ -28,7 +28,7 @@ const AvatarExampleImageCustomizationShorthand = () => (
           />
         ))
       }
-      status={{ color: 'green', icon: 'check', title: 'Available' }}
+      status={{ color: 'green', icon: 'stardust-checkmark', title: 'Available' }}
     />
   </>
 )
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleName.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleName.shorthand.tsx
index 895a5263ac..f576f17ba0 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleName.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleName.shorthand.tsx
@@ -6,7 +6,7 @@ const AvatarExampleNameShorthand = () => (
     name="John Doe"
     status={{
       color: 'green',
-      icon: 'check',
+      icon: 'stardust-checkmark',
       title: 'Available',
     }}
   />
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx
index 33946e0ba1..00af793659 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleSize.shorthand.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Avatar, Grid, SizeValue } from '@stardust-ui/react'
 
 const statusProps = {
-  icon: 'check',
+  icon: 'stardust-checkmark',
   color: 'green',
   title: 'Available',
 }
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx
index ddcfd58262..fe38bc1b89 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatus.shorthand.tsx
@@ -5,21 +5,11 @@ const AvatarExampleStatusShorthand = () => (
   <div>
     <Avatar
       image="public/images/avatar/small/matt.jpg"
-      status={{ color: 'green', icon: 'check', title: 'Available' }}
+      status={{ color: 'green', icon: 'stardust-checkmark', title: 'Available' }}
     />
     &emsp;
     <Avatar image="public/images/avatar/small/matt.jpg" status={{ color: 'red', title: 'Busy' }} />
     &emsp;
-    <Avatar
-      image="public/images/avatar/small/matt.jpg"
-      status={{ color: 'red', icon: 'minus', title: 'Do not disturb' }}
-    />
-    &emsp;
-    <Avatar
-      image="public/images/avatar/small/matt.jpg"
-      status={{ color: 'yellow', icon: 'clock', title: 'Away' }}
-    />
-    &emsp;
     <Avatar
       image="public/images/avatar/small/matt.jpg"
       status={{ color: 'grey', title: 'Offline' }}
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx
index 8a73de8c17..e9b1a537ef 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleStatusCustomization.shorthand.tsx
@@ -6,7 +6,7 @@ const defaultAvatar = (
     image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of Matt' }}
     status={{
       color: 'green',
-      icon: 'check',
+      icon: 'stardust-checkmark',
       title: 'Available',
     }}
   />
@@ -23,7 +23,7 @@ const AvatarExampleStatusCustomizationShorthand = () => (
       image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of Matt' }}
       status={{
         color: 'green',
-        icon: 'check',
+        icon: 'stardust-checkmark',
         title: 'Available',
       }}
       variables={{ statusBorderColor: 'orange' }}
@@ -35,7 +35,7 @@ const AvatarExampleStatusCustomizationShorthand = () => (
       size="larger"
       status={{
         color: 'green',
-        icon: 'check',
+        icon: 'stardust-checkmark',
         title: 'Available',
       }}
     />
@@ -45,7 +45,7 @@ const AvatarExampleStatusCustomizationShorthand = () => (
       image={{ src: 'public/images/avatar/small/matt.jpg', alt: 'Profile picture of Matt' }}
       status={{
         color: 'green',
-        icon: 'check',
+        icon: 'stardust-checkmark',
         title: 'Available',
         size: 'larger',
       }}
@@ -57,7 +57,7 @@ const AvatarExampleStatusCustomizationShorthand = () => (
       size="larger"
       status={{
         color: 'green',
-        icon: 'check',
+        icon: 'stardust-checkmark',
         title: 'Available',
         size: 'medium',
       }}
diff --git a/docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx b/docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx
index ad0b114d0f..146b3df62f 100644
--- a/docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx
+++ b/docs/src/examples/components/Button/Groups/ButtonGroupCircularExample.shorthand.tsx
@@ -5,8 +5,8 @@ const ButtonGroupCircularExampleShorthand = () => (
   <Button.Group
     circular
     buttons={[
-      { key: 'book', icon: 'book', primary: true },
-      { key: 'coffee', icon: 'coffee' },
+      { key: 'emoji', icon: 'emoji', primary: true },
+      { key: 'translation', icon: 'translation' },
       { key: 'play', icon: 'play', primary: true },
     ]}
   />
diff --git a/docs/src/examples/components/Button/Groups/ButtonGroupExample.shorthand.tsx b/docs/src/examples/components/Button/Groups/ButtonGroupExample.shorthand.tsx
index 034c5aac13..4542233d1a 100644
--- a/docs/src/examples/components/Button/Groups/ButtonGroupExample.shorthand.tsx
+++ b/docs/src/examples/components/Button/Groups/ButtonGroupExample.shorthand.tsx
@@ -4,8 +4,8 @@ import { Button } from '@stardust-ui/react'
 const ButtonGroupExampleShorthand = () => (
   <Button.Group
     buttons={[
-      { key: 'book', icon: 'book', iconOnly: true },
-      { key: 'coffee', icon: 'coffee', iconOnly: true },
+      { key: 'emoji', icon: 'emoji', iconOnly: true },
+      { key: 'translation', icon: 'translation', iconOnly: true },
       { key: 'play', icon: 'play', iconOnly: true },
     ]}
   />
diff --git a/docs/src/examples/components/Button/States/ButtonExampleDisabled.shorthand.tsx b/docs/src/examples/components/Button/States/ButtonExampleDisabled.shorthand.tsx
index 1a38a5a9cd..80b3fb823e 100644
--- a/docs/src/examples/components/Button/States/ButtonExampleDisabled.shorthand.tsx
+++ b/docs/src/examples/components/Button/States/ButtonExampleDisabled.shorthand.tsx
@@ -6,8 +6,8 @@ const ButtonExampleDisabled = () => (
     <Flex gap="gap.smaller">
       <Button disabled content="Default" />
       <Button disabled content="Primary" primary />
-      <Button disabled icon="book" content="Click me" iconPosition="before" primary />
-      <Button disabled circular icon="coffee" />
+      <Button disabled icon="emoji" content="Click me" iconPosition="before" primary />
+      <Button disabled circular icon="translation" />
       <Button
         disabled
         text
diff --git a/docs/src/examples/components/Button/States/ButtonExampleDisabled.tsx b/docs/src/examples/components/Button/States/ButtonExampleDisabled.tsx
index 26213cfac4..c5d35281fe 100644
--- a/docs/src/examples/components/Button/States/ButtonExampleDisabled.tsx
+++ b/docs/src/examples/components/Button/States/ButtonExampleDisabled.tsx
@@ -9,11 +9,11 @@ const ButtonExampleDisabled = () => (
         Primary
       </Button>
       <Button disabled icon iconPosition="before" primary>
-        <Icon name="book" xSpacing="after" />
+        <Icon name="emoji" xSpacing="after" />
         <Text content="Click me" />
       </Button>
       <Button disabled circular>
-        <Icon name="coffee" xSpacing="none" />
+        <Icon name="translation" xSpacing="none" />
       </Button>
       <Button disabled text>
         <Icon name="call-video" xSpacing="before" />
diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx
index f843667092..316dcc3e24 100644
--- a/docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleCircular.shorthand.tsx
@@ -4,8 +4,8 @@ import { Button, Flex } from '@stardust-ui/react'
 const ButtonExampleCircular = () => (
   <Flex gap="gap.smaller">
     <Button circular content="C" />
-    <Button circular icon="book" />
-    <Button circular icon="coffee" primary />
+    <Button circular icon="emoji" />
+    <Button circular icon="broadcast" primary />
   </Flex>
 )
 export default ButtonExampleCircular
diff --git a/docs/src/examples/components/Button/Variations/ButtonExampleCircular.tsx b/docs/src/examples/components/Button/Variations/ButtonExampleCircular.tsx
index a1debaa92d..a4fb5bf717 100644
--- a/docs/src/examples/components/Button/Variations/ButtonExampleCircular.tsx
+++ b/docs/src/examples/components/Button/Variations/ButtonExampleCircular.tsx
@@ -5,10 +5,10 @@ const ButtonExampleCircular = () => (
   <Flex gap="gap.smaller">
     <Button circular>C</Button>
     <Button circular icon>
-      <Icon name="book" xSpacing="none" />
+      <Icon name="emoji" xSpacing="none" />
     </Button>
     <Button circular icon primary>
-      <Icon name="coffee" xSpacing="none" />
+      <Icon name="broadcast" xSpacing="none" />
     </Button>
   </Flex>
 )
diff --git a/docs/src/examples/components/Chat/Content/ChatExampleReactionGroup.shorthand.tsx b/docs/src/examples/components/Chat/Content/ChatExampleReactionGroup.shorthand.tsx
index 59afa1c5b6..0a873cf1b1 100644
--- a/docs/src/examples/components/Chat/Content/ChatExampleReactionGroup.shorthand.tsx
+++ b/docs/src/examples/components/Chat/Content/ChatExampleReactionGroup.shorthand.tsx
@@ -2,8 +2,8 @@ import { Avatar, Chat, ChatItemProps, ReactionProps, ShorthandCollection } from
 import * as React from 'react'
 
 const reactions: ShorthandCollection<ReactionProps> = [
-  { key: 'up', icon: 'thumbs up', content: '1K' },
-  { key: 'down', icon: 'thumbs down', content: 5 },
+  { key: 'up', icon: 'like', content: '1K' },
+  { key: 'smile', icon: 'emoji', content: 5 },
 ]
 
 const items: ShorthandCollection<ChatItemProps> = [
@@ -27,7 +27,7 @@ const items: ShorthandCollection<ChatItemProps> = [
     key: 'message-2',
     message: (
       <Chat.Message
-        reactionGroup={[{ key: 'up', icon: 'thumbs up', content: '8' }]}
+        reactionGroup={[{ key: 'up', icon: 'like', content: '8' }]}
         content="I'm back!"
         author="John Doe"
         timestamp="Yesterday, 10:15 PM"
diff --git a/docs/src/examples/components/Chat/Content/ChatExampleReactionGroupMeReacting.shorthand.tsx b/docs/src/examples/components/Chat/Content/ChatExampleReactionGroupMeReacting.shorthand.tsx
index 2facc726c1..2d336cc73f 100644
--- a/docs/src/examples/components/Chat/Content/ChatExampleReactionGroupMeReacting.shorthand.tsx
+++ b/docs/src/examples/components/Chat/Content/ChatExampleReactionGroupMeReacting.shorthand.tsx
@@ -2,8 +2,8 @@ import * as React from 'react'
 import { Avatar, Chat, ChatItemProps, ReactionProps, ShorthandCollection } from '@stardust-ui/react'
 
 const reactions: ShorthandCollection<ReactionProps> = [
-  { icon: 'thumbs up', content: '1K', key: 'likes', variables: { meReacting: true }, as: 'button' },
-  { icon: 'thumbs down', content: 2, key: 'dislikes', as: 'button' },
+  { icon: 'like', content: '1K', key: 'likes', variables: { meReacting: true }, as: 'button' },
+  { icon: 'emoji', content: 2, key: 'smiles', as: 'button' },
 ]
 
 const items: ShorthandCollection<ChatItemProps> = [
diff --git a/docs/src/examples/components/Chat/Performance/Chat.perf.tsx b/docs/src/examples/components/Chat/Performance/Chat.perf.tsx
index d5f6fcc3d5..1be2fc4376 100644
--- a/docs/src/examples/components/Chat/Performance/Chat.perf.tsx
+++ b/docs/src/examples/components/Chat/Performance/Chat.perf.tsx
@@ -9,7 +9,7 @@ const avatars = {
 
 const janeAvatar = {
   image: `data:image/jpeg;base64,${avatars.ade}`,
-  status: { color: 'green', icon: 'check' },
+  status: { color: 'green', icon: 'stardust-checkmark' },
 }
 
 const ChatExample = () => {
diff --git a/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx b/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx
index 38b6bcc3d8..dd5bc529e3 100644
--- a/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx
+++ b/docs/src/examples/components/Chat/Performance/ChatWithPopover.perf.tsx
@@ -17,7 +17,7 @@ const avatars = {
 
 const janeAvatar = {
   image: `data:image/jpeg;base64,${avatars.ade}`,
-  status: { color: 'green', icon: 'check' },
+  status: { color: 'green', icon: 'stardust-checkmark' },
 }
 
 export interface PopoverProps {
@@ -59,37 +59,37 @@ class Popover extends React.Component<PopoverProps, PopoverState> {
         items={[
           {
             key: 'smile',
-            icon: 'smile',
+            icon: 'emoji',
             className: 'smile-emoji',
             'aria-label': 'smile one',
           },
           {
             key: 'smile2',
-            icon: 'smile',
+            icon: 'emoji',
             className: 'smile-emoji',
             'aria-label': 'smile two',
           },
           {
             key: 'smile3',
-            icon: 'smile',
+            icon: 'emoji',
             className: 'smile-emoji',
             'aria-label': 'smile three',
           },
           {
             key: 'a',
-            icon: 'thumbs up',
+            icon: 'like',
             'aria-label': 'thumbs up',
           },
           {
             key: 'c',
-            icon: 'ellipsis horizontal',
+            icon: 'more',
             'aria-label': 'more options',
             indicator: false,
             menu: {
               pills: true,
               items: [
-                { key: 'bookmark', icon: 'folder', content: 'Save this message' },
-                { key: 'linkify', icon: 'linkify', content: 'Copy link' },
+                { key: 'bookmark', icon: 'download', content: 'Save this message' },
+                { key: 'linkify', icon: 'link', content: 'Copy link' },
                 { key: 'translate', icon: 'translate', content: 'Translate' },
               ],
             },
diff --git a/docs/src/examples/components/Chat/Rtl/ChatExample.rtl.tsx b/docs/src/examples/components/Chat/Rtl/ChatExample.rtl.tsx
index d8b787d753..113f6c801d 100644
--- a/docs/src/examples/components/Chat/Rtl/ChatExample.rtl.tsx
+++ b/docs/src/examples/components/Chat/Rtl/ChatExample.rtl.tsx
@@ -18,7 +18,7 @@ const items: ShorthandCollection<ChatItemProps> = [
     gutter: (
       <Avatar
         image="public/images/avatar/small/ade.jpg"
-        status={{ color: 'green', icon: 'check' }}
+        status={{ color: 'green', icon: 'stardust-checkmark' }}
       />
     ),
     message: (
diff --git a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
index 13e1bb120a..ea34b578d4 100644
--- a/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
+++ b/docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx
@@ -3,7 +3,7 @@ import { Avatar, Chat, ChatItemProps, Divider, ShorthandCollection } from '@star
 
 const janeAvatar = {
   image: 'public/images/avatar/small/ade.jpg',
-  status: { color: 'green', icon: 'check' },
+  status: { color: 'green', icon: 'stardust-checkmark' },
 }
 
 const items: ShorthandCollection<ChatItemProps> = [
diff --git a/docs/src/examples/components/Chat/Types/ChatExampleContentPosition.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatExampleContentPosition.shorthand.tsx
index 28850c4e03..6f24597424 100644
--- a/docs/src/examples/components/Chat/Types/ChatExampleContentPosition.shorthand.tsx
+++ b/docs/src/examples/components/Chat/Types/ChatExampleContentPosition.shorthand.tsx
@@ -6,7 +6,7 @@ const [janeAvatar, johnAvatar] = [
   'public/images/avatar/small/joe.jpg',
 ].map(src => ({
   image: src,
-  status: { color: 'green', icon: 'check' },
+  status: { color: 'green', icon: 'stardust-checkmark' },
 }))
 
 const items: ShorthandCollection<ChatItemProps> = [
diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx
index 3ddc992664..b805aa30e8 100644
--- a/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx
+++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleBadge.shorthand.tsx
@@ -3,7 +3,7 @@ import { Avatar, Chat, ChatItemProps, ShorthandCollection } from '@stardust-ui/r
 
 const janeAvatar = {
   image: 'public/images/avatar/small/ade.jpg',
-  status: { color: 'green', icon: 'check' },
+  status: { color: 'green', icon: 'stardust-checkmark' },
 }
 
 const items: ShorthandCollection<ChatItemProps> = [
diff --git a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx
index 531bffa336..f3863f0719 100644
--- a/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx
+++ b/docs/src/examples/components/Chat/Types/ChatMessageExampleStyled.shorthand.tsx
@@ -9,13 +9,13 @@ import {
 } from '@stardust-ui/react'
 
 const reactions: ShorthandCollection<ReactionProps> = [
-  { key: 'up', icon: 'thumbs up', content: '1K' },
-  { key: 'down', icon: 'thumbs down', content: 5 },
+  { key: 'up', icon: 'like', content: '1K' },
+  { key: 'smile', icon: 'emoji', content: 5 },
 ]
 
 const janeAvatar: AvatarProps = {
   image: 'public/images/avatar/small/ade.jpg',
-  status: { color: 'green', icon: 'check' },
+  status: { color: 'green', icon: 'stardust-checkmark' },
 }
 
 const content = (
@@ -108,7 +108,7 @@ const ChatMessageExampleStyled = () => (
                 author="John Doe"
                 timestamp="Yesterday, 10:15 PM"
                 mine
-                badge={{ icon: 'at' }}
+                badge={{ icon: 'mention' }}
                 badgePosition="start"
                 reactionGroup={reactions}
               />
@@ -125,7 +125,7 @@ const ChatMessageExampleStyled = () => (
               content={{ content }}
               author="Jane Doe"
               timestamp="Yesterday, 10:15 PM"
-              badge={{ icon: 'exclamation' }}
+              badge={{ icon: 'exclamation-circle' }}
               reactionGroup={reactions}
             />
           ),
diff --git a/docs/src/examples/components/Flex/Recipes.mdx b/docs/src/examples/components/Flex/Recipes.mdx
index fdbc066e9b..028d1130a0 100644
--- a/docs/src/examples/components/Flex/Recipes.mdx
+++ b/docs/src/examples/components/Flex/Recipes.mdx
@@ -40,7 +40,7 @@ One of the most representative examples - a navigation menu, it will have a menu
 
 <ExampleSnippet>
   <Flex space="between">
-    <Button content="Logo" icon="chess rook" />
+    <Button content="Logo" icon="skype-logo" />
     <Flex gap="gap.small">
       <Button content="Page 1" />
       <Button content="Page 2" />
@@ -53,7 +53,7 @@ This approach introduces unnecessary nesting level - it is possible to achieve t
 
 <ExampleSnippet>
   <Flex gap="gap.small">
-    <Button content="Logo" icon="chess rook" />
+    <Button content="Logo" icon="skype-logo" />
     <Flex.Item push>
       <Button content="Page 1" />
     </Flex.Item>
diff --git a/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx
index 093d13b00b..d08807a007 100644
--- a/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexExampleInput.shorthand.tsx
@@ -5,18 +5,15 @@ const FlexExampleInput = () => (
   <Flex gap="gap.medium" debug>
     <Flex.Item grow>
       <Flex>
-        <Label
-          icon="plane"
-          styles={{ background: 'darkgrey', height: 'auto', padding: '0 15px' }}
-        />
+        <Label icon="star" styles={{ background: 'darkgrey', height: 'auto', padding: '0 15px' }} />
 
         <Flex.Item grow>
-          <Input placeholder="Enter your flight #" fluid />
+          <Input placeholder="Find bookmarks..." fluid />
         </Flex.Item>
       </Flex>
     </Flex.Item>
 
-    <Button content="Load" />
+    <Button content="Search" />
   </Flex>
 )
 
diff --git a/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx b/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx
index 1d5127f2f4..2d827f9062 100644
--- a/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx
+++ b/docs/src/examples/components/Flex/Types/FlexExampleNavMenu.shorthand.tsx
@@ -3,7 +3,7 @@ import { Flex, Button } from '@stardust-ui/react'
 
 const FlexExampleNavMenu = () => (
   <Flex gap="gap.small" debug>
-    <Button content="Logo" icon="chess rook" />
+    <Button content="Logo" icon="skype-logo" />
 
     <Flex.Item push>
       <Button content="Page 1" />
diff --git a/docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeExclusiveExample.shorthand.tsx b/docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeExclusiveExample.shorthand.tsx
index 74416b8e19..cffeee6ae5 100644
--- a/docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeExclusiveExample.shorthand.tsx
+++ b/docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeExclusiveExample.shorthand.tsx
@@ -42,7 +42,7 @@ const items = [
 
 const titleRenderer = (Component, { content, open, hasSubtree, ...restProps }) => (
   <Component open={open} hasSubtree={hasSubtree} {...restProps}>
-    {hasSubtree && <Icon name={open ? 'arrow down' : 'arrow right'} />}
+    {hasSubtree && <Icon name={open ? 'arrow-down' : 'arrow-right'} />}
     <span>{content}</span>
   </Component>
 )
diff --git a/docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeTitleCustomizationExample.shorthand.tsx b/docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeTitleCustomizationExample.shorthand.tsx
index a73f7b3529..dbec2a16cc 100644
--- a/docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeTitleCustomizationExample.shorthand.tsx
+++ b/docs/src/examples/components/HierarchicalTree/Types/HierarchicalTreeTitleCustomizationExample.shorthand.tsx
@@ -32,7 +32,7 @@ const items = [
 
 const titleRenderer = (Component, { content, open, hasSubtree, ...restProps }) => (
   <Component open={open} hasSubtree={hasSubtree} {...restProps}>
-    {hasSubtree && <Icon name={open ? 'arrow down' : 'arrow right'} />}
+    {hasSubtree && <Icon name={open ? 'arrow-down' : 'arrow-right'} />}
     <span>{content}</span>
   </Component>
 )
diff --git a/docs/src/examples/components/Icon/Rtl/IconExample.rtl.tsx b/docs/src/examples/components/Icon/Rtl/IconExample.rtl.tsx
index a87b854ed2..9d68d77006 100644
--- a/docs/src/examples/components/Icon/Rtl/IconExample.rtl.tsx
+++ b/docs/src/examples/components/Icon/Rtl/IconExample.rtl.tsx
@@ -4,7 +4,7 @@ import { Flex, Icon } from '@stardust-ui/react'
 const IconExampleRtl = () => (
   <Flex gap="gap.smaller">
     <Icon name="call-video" />
-    <Icon name="circle" />
+    <Icon name="stardust-circle" />
     <Icon name="redo" />
     <Icon name="send" />
   </Flex>
diff --git a/docs/src/examples/components/Icon/Rtl/IconExampleRotate.rtl.tsx b/docs/src/examples/components/Icon/Rtl/IconExampleRotate.rtl.tsx
index 4b785cf5a8..9ce4bb1cf8 100644
--- a/docs/src/examples/components/Icon/Rtl/IconExampleRotate.rtl.tsx
+++ b/docs/src/examples/components/Icon/Rtl/IconExampleRotate.rtl.tsx
@@ -4,8 +4,8 @@ import { Flex, Icon } from '@stardust-ui/react'
 const IconExampleRotateRtl = () => (
   <Flex gap="gap.smaller">
     <Icon name="call-video" rotate={45} />
-    <Icon name="chess rook" rotate={45} />
-    <Icon name="book" rotate={45} />
+    <Icon name="skype-logo" rotate={45} />
+    <Icon name="emoji" rotate={45} />
     <Icon name="bullets" rotate={45} />
   </Flex>
 )
diff --git a/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx b/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx
index 226022dcef..8b6223af29 100644
--- a/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx
+++ b/docs/src/examples/components/Icon/Types/IconExample.shorthand.tsx
@@ -4,8 +4,8 @@ import { Flex, Icon } from '@stardust-ui/react'
 const IconExample = () => (
   <Flex gap="gap.smaller">
     <Icon name="call-video" />
-    <Icon name="chess rook" />
-    <Icon name="book" />
+    <Icon name="skype-logo" />
+    <Icon name="emoji" />
     <Icon name="circle" />
   </Flex>
 )
diff --git a/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx
index 4db6215d1f..f0e1747324 100644
--- a/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx
+++ b/docs/src/examples/components/Icon/Variations/IconExampleBordered.shorthand.tsx
@@ -3,17 +3,14 @@ import { Flex, Icon } from '@stardust-ui/react'
 
 const IconExampleBordered = () => (
   <Flex gap="gap.smaller">
-    <Icon name="chess rook" bordered />
-    <Icon name="book" bordered />
-    <Icon name="expand" bordered />
+    <Icon name="skype-logo" bordered />
+    <Icon name="emoji" bordered />
     <Icon name="play" bordered />
     <Icon name="call" bordered />
     <Icon name="call-video" bordered />
-    <Icon name="stop" bordered />
-    <Icon name="calendar alternate outline" bordered />
-    <Icon name="coffee" bordered />
-    <Icon name="compass outline" bordered />
-    <Icon name="area chart" bordered />
+    <Icon name="calendar outline" bordered />
+    <Icon name="translation" bordered />
+    <Icon name="star outline" bordered />
   </Flex>
 )
 
diff --git a/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx
index 4477f73065..2c43f2317c 100644
--- a/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx
+++ b/docs/src/examples/components/Icon/Variations/IconExampleCircular.shorthand.tsx
@@ -3,17 +3,14 @@ import { Flex, Icon } from '@stardust-ui/react'
 
 const IconExampleCircular = () => (
   <Flex gap="gap.smaller">
-    <Icon name="chess rook" circular bordered />
-    <Icon name="book" circular bordered />
-    <Icon name="expand" circular bordered />
+    <Icon name="skype-logo" circular bordered />
+    <Icon name="emoji" circular bordered />
     <Icon name="play" circular bordered />
     <Icon name="call" circular bordered />
     <Icon name="call-video" circular bordered />
-    <Icon name="stop" circular bordered />
-    <Icon name="calendar alternate outline" circular bordered />
-    <Icon name="coffee" circular bordered />
-    <Icon name="compass outline" circular bordered />
-    <Icon name="area chart" circular bordered />
+    <Icon name="calendar outline" circular bordered />
+    <Icon name="translation" circular bordered />
+    <Icon name="star outline" circular bordered />
   </Flex>
 )
 
diff --git a/docs/src/examples/components/Icon/Variations/IconExampleRotate.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleRotate.shorthand.tsx
index b25da01f9a..20ef6e6fb3 100644
--- a/docs/src/examples/components/Icon/Variations/IconExampleRotate.shorthand.tsx
+++ b/docs/src/examples/components/Icon/Variations/IconExampleRotate.shorthand.tsx
@@ -4,9 +4,9 @@ import { Flex, Icon } from '@stardust-ui/react'
 const IconExampleRotate = () => (
   <Flex gap="gap.smaller">
     <Icon name="call-video" rotate={45} />
-    <Icon name="chess rook" rotate={45} />
-    <Icon name="book" rotate={45} />
-    <Icon name="bullets" rotate={45} />
+    <Icon name="skype-logo" rotate={45} />
+    <Icon name="emoji" rotate={45} />
+    <Icon name="more" rotate={45} />
   </Flex>
 )
 
diff --git a/docs/src/examples/components/Icon/Variations/IconExampleSize.shorthand.tsx b/docs/src/examples/components/Icon/Variations/IconExampleSize.shorthand.tsx
index 863eb92454..003b34a20e 100644
--- a/docs/src/examples/components/Icon/Variations/IconExampleSize.shorthand.tsx
+++ b/docs/src/examples/components/Icon/Variations/IconExampleSize.shorthand.tsx
@@ -3,25 +3,25 @@ import { Grid, Icon } from '@stardust-ui/react'
 
 const IconExampleSize = () => (
   <Grid rows={2} styles={{ textAlign: 'center' }}>
-    <Icon name="home" size="smallest" />
+    <Icon name="emoji" size="smallest" />
     <Icon name="call-video" size="smallest" />
 
-    <Icon name="home" size="smaller" />
+    <Icon name="emoji" size="smaller" />
     <Icon name="call-video" size="smaller" />
 
-    <Icon name="home" size="small" />
+    <Icon name="emoji" size="small" />
     <Icon name="call-video" size="small" />
 
-    <Icon name="home" />
+    <Icon name="emoji" />
     <Icon name="call-video" />
 
-    <Icon name="home" size="large" />
+    <Icon name="emoji" size="large" />
     <Icon name="call-video" size="large" />
 
-    <Icon name="home" size="larger" />
+    <Icon name="emoji" size="larger" />
     <Icon name="call-video" size="larger" />
 
-    <Icon name="home" size="largest" />
+    <Icon name="emoji" size="largest" />
     <Icon name="call-video" size="largest" />
   </Grid>
 )
diff --git a/docs/src/examples/components/List/Variations/ListExampleHorizontal.shorthand.tsx b/docs/src/examples/components/List/Variations/ListExampleHorizontal.shorthand.tsx
index 44feaaaaad..15d8005a4c 100644
--- a/docs/src/examples/components/List/Variations/ListExampleHorizontal.shorthand.tsx
+++ b/docs/src/examples/components/List/Variations/ListExampleHorizontal.shorthand.tsx
@@ -4,12 +4,12 @@ import { List, Status } from '@stardust-ui/react'
 const items = [
   {
     key: 'irving',
-    media: <Status state="error" icon="minus" />,
+    media: <Status state="error" icon="error" />,
     header: 'Irving Kuhic',
   },
   {
     key: 'skyler',
-    media: <Status state="success" icon="check" />,
+    media: <Status state="success" icon="stardust-checkmark" />,
     header: 'Skyler Parks',
   },
   {
diff --git a/docs/src/examples/components/Menu/Slots/MenuExampleIconOnly.shorthand.tsx b/docs/src/examples/components/Menu/Slots/MenuExampleIconOnly.shorthand.tsx
index 98a0918005..de83ffbb71 100644
--- a/docs/src/examples/components/Menu/Slots/MenuExampleIconOnly.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Slots/MenuExampleIconOnly.shorthand.tsx
@@ -2,8 +2,8 @@ import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
-  { key: 'home', icon: 'home' },
-  { key: 'users', icon: 'users' },
+  { key: 'onedrive', icon: 'onedrive' },
+  { key: 'star', icon: 'star' },
   { key: 'search', icon: 'search' },
 ]
 
diff --git a/docs/src/examples/components/Menu/Slots/MenuExampleWithIcons.shorthand.tsx b/docs/src/examples/components/Menu/Slots/MenuExampleWithIcons.shorthand.tsx
index c000365448..10214a567f 100644
--- a/docs/src/examples/components/Menu/Slots/MenuExampleWithIcons.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Slots/MenuExampleWithIcons.shorthand.tsx
@@ -2,8 +2,8 @@ import * as React from 'react'
 import { Menu } from '@stardust-ui/react'
 
 const items = [
-  { key: 'home', content: 'Home', icon: 'home' },
-  { key: 'users', content: 'Users', icon: 'users' },
+  { key: 'onedrive', icon: 'onedrive' },
+  { key: 'star', icon: 'star' },
   { key: 'search', icon: 'search' },
 ]
 
diff --git a/docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.tsx b/docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.tsx
index 925cc2ba83..eefa3d7867 100644
--- a/docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.tsx
+++ b/docs/src/examples/components/Menu/Usages/MenuExampleToolbar.shorthand.tsx
@@ -52,12 +52,12 @@ const items: ShorthandCollection<MenuItemProps> = [
     'aria-label': 'Meetup Tool',
   },
   {
-    key: 'book',
+    key: 'settings',
     icon: {
-      name: 'book',
+      name: 'settings',
       outline: true,
     },
-    'aria-label': 'Book Tool',
+    'aria-label': 'Settings',
   },
   {
     key: 'menuButton2',
diff --git a/docs/src/examples/components/Popup/Types/PopupControlledExample.shorthand.tsx b/docs/src/examples/components/Popup/Types/PopupControlledExample.shorthand.tsx
index e12815294c..08c334be65 100644
--- a/docs/src/examples/components/Popup/Types/PopupControlledExample.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupControlledExample.shorthand.tsx
@@ -18,7 +18,7 @@ const PopupControlledExample = () => {
     <Popup
       open={open}
       onOpenChange={(e, { open }) => setOpen(open)}
-      trigger={<Button icon="expand" title="Open popup" />}
+      trigger={<Button icon="open-outside" title="Open popup" />}
       content={popupContent}
       trapFocus
     />
diff --git a/docs/src/examples/components/Popup/Types/PopupControlledExample.tsx b/docs/src/examples/components/Popup/Types/PopupControlledExample.tsx
index 954b325b4f..aa8ea73dc9 100644
--- a/docs/src/examples/components/Popup/Types/PopupControlledExample.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupControlledExample.tsx
@@ -21,7 +21,7 @@ const PopupControlledExample = () => {
       content={popupContent}
       trapFocus
     >
-      <Button icon="expand" title="Open popup" />
+      <Button icon="open-outside" title="Open popup" />
     </Popup>
   )
 }
diff --git a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx
index 5492c62740..2a2b223eab 100644
--- a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.shorthand.tsx
@@ -16,7 +16,7 @@ class PopupExample extends React.Component {
         {/* CUSTOM DOM ELEMENT is used as target for Popup */}
         <Popup
           target={this.state.popupTarget}
-          trigger={<Button icon="question" circular styles={{ cursor: 'pointer' }} />}
+          trigger={<Button icon="qna" circular styles={{ cursor: 'pointer' }} />}
           content="well, yes, I am just a garbish text ¯\_(ツ)_/¯"
           position="below"
         />
diff --git a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx
index a849c2ded8..ac0e6e06db 100644
--- a/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupCustomTargetExample.tsx
@@ -19,7 +19,7 @@ class PopupExample extends React.Component {
           content="well, yes, I am just a garbish text ¯\_(ツ)_/¯"
           position="below"
         >
-          <Button icon="question" circular styles={{ cursor: 'pointer' }} />
+          <Button icon="qna" circular styles={{ cursor: 'pointer' }} />
         </Popup>
 
         <div style={{ marginLeft: 10 }}>
diff --git a/docs/src/examples/components/Popup/Types/PopupExample.shorthand.tsx b/docs/src/examples/components/Popup/Types/PopupExample.shorthand.tsx
index 67b5e8bf9f..1ea57f2fae 100644
--- a/docs/src/examples/components/Popup/Types/PopupExample.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupExample.shorthand.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Button, Popup } from '@stardust-ui/react'
 
-const PopupExample = () => <Popup trigger={<Button icon="expand" />} content="Hello from popup!" />
+const PopupExample = () => <Popup trigger={<Button icon="more" />} content="Hello from popup!" />
 
 export default PopupExample
diff --git a/docs/src/examples/components/Popup/Types/PopupExample.tsx b/docs/src/examples/components/Popup/Types/PopupExample.tsx
index 5e5c9b7ff4..1379346b11 100644
--- a/docs/src/examples/components/Popup/Types/PopupExample.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupExample.tsx
@@ -3,7 +3,7 @@ import { Button, Popup } from '@stardust-ui/react'
 
 const PopupExample = () => (
   <Popup content="Hello from popup!">
-    <Button icon="expand" />
+    <Button icon="more" />
   </Popup>
 )
 
diff --git a/docs/src/examples/components/Popup/Types/PopupExampleInline.shorthand.tsx b/docs/src/examples/components/Popup/Types/PopupExampleInline.shorthand.tsx
index 51eaa06ce4..686bce498c 100644
--- a/docs/src/examples/components/Popup/Types/PopupExampleInline.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupExampleInline.shorthand.tsx
@@ -3,7 +3,7 @@ import { Button, Popup } from '@stardust-ui/react'
 
 const PopupExampleInline = () => (
   <Popup
-    trigger={<Button icon="expand" />}
+    trigger={<Button icon="more" />}
     content="This popup is rendered next to the trigger."
     inline
   />
diff --git a/docs/src/examples/components/Popup/Types/PopupExampleInline.tsx b/docs/src/examples/components/Popup/Types/PopupExampleInline.tsx
index 1d973ab032..1d83596d79 100644
--- a/docs/src/examples/components/Popup/Types/PopupExampleInline.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupExampleInline.tsx
@@ -3,7 +3,7 @@ import { Button, Popup } from '@stardust-ui/react'
 
 const PopupExampleInline = () => (
   <Popup content="This popup is rendered next to the trigger." inline>
-    <Button icon="expand" />
+    <Button icon="more" />
   </Popup>
 )
 
diff --git a/docs/src/examples/components/Popup/Types/PopupExamplePointing.shorthand.tsx b/docs/src/examples/components/Popup/Types/PopupExamplePointing.shorthand.tsx
index bfad09f7f1..f22bd73baa 100644
--- a/docs/src/examples/components/Popup/Types/PopupExamplePointing.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupExamplePointing.shorthand.tsx
@@ -17,25 +17,85 @@ const PopupWithButton = props => (
     trigger={
       <Button
         icon={props.icon}
-        styles={{ padding: props.padding, height: '38px', minWidth: '64px' }}
+        styles={{ padding: props.padding, height: '64px', minWidth: '64px' }}
       />
     }
   />
 )
 
 const triggers = [
-  { position: 'above', align: 'start', icon: 'arrow circle up', padding: '5px 42px 18px 5px' },
-  { position: 'above', align: 'center', icon: 'arrow circle up', padding: '5px 5px 18px 5px' },
-  { position: 'above', align: 'end', icon: 'arrow circle up', padding: '5px 5px 18px 42px' },
-  { position: 'below', align: 'start', icon: 'arrow circle down', padding: '18px 42px 5px 5px' },
-  { position: 'below', align: 'center', icon: 'arrow circle down', padding: '18px 5px 5px 5px' },
-  { position: 'below', align: 'end', icon: 'arrow circle down', padding: '18px 5px 5px 42px' },
-  { position: 'before', align: 'top', icon: 'arrow circle left', padding: '5px 42px 18px 5px' },
-  { position: 'before', align: 'center', icon: 'arrow circle left', padding: '5px 42px 5px 5px' },
-  { position: 'before', align: 'bottom', icon: 'arrow circle left', padding: '18px 42px 5px 5px' },
-  { position: 'after', align: 'top', icon: 'arrow circle right', padding: '5px 5px 18px 42px' },
-  { position: 'after', align: 'center', icon: 'arrow circle right', padding: '5px 5px 5px 42px' },
-  { position: 'after', align: 'bottom', icon: 'arrow circle right', padding: '18px 5px 5px 42px' },
+  {
+    position: 'above',
+    align: 'start',
+    icon: { name: 'arrow-up', circular: true, bordered: true },
+    padding: '5px 42px 18px 5px',
+  },
+  {
+    position: 'above',
+    align: 'center',
+    icon: { name: 'arrow-up', circular: true, bordered: true },
+    padding: '5px 5px 18px 5px',
+  },
+  {
+    position: 'above',
+    align: 'end',
+    icon: { name: 'arrow-up', circular: true, bordered: true },
+    padding: '5px 5px 18px 42px',
+  },
+  {
+    position: 'below',
+    align: 'start',
+    icon: { name: 'arrow-down', circular: true, bordered: true },
+    padding: '18px 42px 5px 5px',
+  },
+  {
+    position: 'below',
+    align: 'center',
+    icon: { name: 'arrow-down', circular: true, bordered: true },
+    padding: '18px 5px 5px 5px',
+  },
+  {
+    position: 'below',
+    align: 'end',
+    icon: { name: 'arrow-down', circular: true, bordered: true },
+    padding: '18px 5px 5px 42px',
+  },
+  {
+    position: 'before',
+    align: 'top',
+    icon: { name: 'arrow-left', circular: true, bordered: true },
+    padding: '5px 42px 18px 5px',
+  },
+  {
+    position: 'before',
+    align: 'center',
+    icon: { name: 'arrow-left', circular: true, bordered: true },
+    padding: '5px 42px 5px 5px',
+  },
+  {
+    position: 'before',
+    align: 'bottom',
+    icon: { name: 'arrow-left', circular: true, bordered: true },
+    padding: '18px 42px 5px 5px',
+  },
+  {
+    position: 'after',
+    align: 'top',
+    icon: { name: 'arrow-right', circular: true, bordered: true },
+    padding: '5px 5px 18px 42px',
+  },
+  {
+    position: 'after',
+    align: 'center',
+    icon: { name: 'arrow-right', circular: true, bordered: true },
+    padding: '5px 5px 5px 42px',
+  },
+  {
+    position: 'after',
+    align: 'bottom',
+    icon: { name: 'arrow-right', circular: true, bordered: true },
+    padding: '18px 5px 5px 42px',
+  },
 ]
 
 const PopupExamplePointing = () => (
diff --git a/docs/src/examples/components/Popup/Types/PopupFocusTrapExample.shorthand.tsx b/docs/src/examples/components/Popup/Types/PopupFocusTrapExample.shorthand.tsx
index b208e8c71b..f448c31431 100644
--- a/docs/src/examples/components/Popup/Types/PopupFocusTrapExample.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Types/PopupFocusTrapExample.shorthand.tsx
@@ -6,7 +6,7 @@ const PopupFocusTrapExample = () => (
     <Popup
       /** Provided prop introduces focus trap to popup content. */
       trapFocus
-      trigger={<Button icon="expand" content="Trap focus on appearence" />}
+      trigger={<Button icon="more" content="Trap focus on appearence" />}
       content={
         <>
           <Header as="h4">This content traps focus on appearance.</Header>
@@ -17,7 +17,7 @@ const PopupFocusTrapExample = () => (
 
     {/* Default Popup behavior doesn't introduce focus trap. */}
     <Popup
-      trigger={<Button icon="expand" content="Do not trap focus" />}
+      trigger={<Button icon="more" content="Do not trap focus" />}
       content={
         <>
           <Header as="h4">Focus is not trapped for this content.</Header>
diff --git a/docs/src/examples/components/Popup/Usage/PopupExampleAsync.shorthand.tsx b/docs/src/examples/components/Popup/Usage/PopupExampleAsync.shorthand.tsx
index 64845cb30c..284a412d84 100644
--- a/docs/src/examples/components/Popup/Usage/PopupExampleAsync.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Usage/PopupExampleAsync.shorthand.tsx
@@ -22,7 +22,7 @@ class AsyncDataLoader extends React.Component<any, any> {
 
 const PopupExampleAsync = () => (
   <Popup
-    trigger={<Button icon="expand" content="Click me!" />}
+    trigger={<Button icon="more" content="Click me!" />}
     renderContent={updatePosition => <AsyncDataLoader onLoaded={updatePosition} />}
   />
 )
diff --git a/docs/src/examples/components/Popup/Usage/PopupExampleCloseButton.shorthand.tsx b/docs/src/examples/components/Popup/Usage/PopupExampleCloseButton.shorthand.tsx
index e38d6c128e..cf349625fc 100644
--- a/docs/src/examples/components/Popup/Usage/PopupExampleCloseButton.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Usage/PopupExampleCloseButton.shorthand.tsx
@@ -86,7 +86,7 @@ const PopupControlledExample = () => {
     <Popup
       open={open}
       onOpenChange={(e, { open }) => setOpen(open)}
-      trigger={<Button icon="user" content="People Picker" aria-label="Choose a person." />}
+      trigger={<Button icon="user-friends" content="People Picker" aria-label="Choose a person." />}
       content={{
         content: popupContent,
         'aria-label': 'People picker',
diff --git a/docs/src/examples/components/Popup/Usage/PopupExampleCloseButton.tsx b/docs/src/examples/components/Popup/Usage/PopupExampleCloseButton.tsx
index a8a79f781c..40c014b271 100644
--- a/docs/src/examples/components/Popup/Usage/PopupExampleCloseButton.tsx
+++ b/docs/src/examples/components/Popup/Usage/PopupExampleCloseButton.tsx
@@ -92,7 +92,7 @@ const PopupCloseButtonExample = () => {
       }}
       trapFocus
     >
-      <Button icon="user" content="People Picker" aria-label="Choose a person." />
+      <Button icon="user-friends" content="People Picker" aria-label="Choose a person." />
     </Popup>
   )
 }
diff --git a/docs/src/examples/components/Popup/Usage/PopupExampleOn.shorthand.tsx b/docs/src/examples/components/Popup/Usage/PopupExampleOn.shorthand.tsx
index 784da0dc4c..28fb51a457 100644
--- a/docs/src/examples/components/Popup/Usage/PopupExampleOn.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Usage/PopupExampleOn.shorthand.tsx
@@ -14,24 +14,24 @@ class PopupExampleOn extends React.Component {
       <>
         <Flex gap="gap.smaller">
           <Popup
-            trigger={<Button icon="expand" content="Click" aria-label="Click button" />}
+            trigger={<Button icon="more" content="Click" aria-label="Click button" />}
             content="Hello from popup on click!"
             on="click"
           />
           <Popup
-            trigger={<Button icon="expand" content="Hover" aria-label="Hover button" />}
+            trigger={<Button icon="more" content="Hover" aria-label="Hover button" />}
             content="Hello from popup on hover!"
             on="hover"
           />
           <Popup
-            trigger={<Button icon="expand" content="Focus" aria-label="Focus button" />}
+            trigger={<Button icon="more" content="Focus" aria-label="Focus button" />}
             content="Hello from popup on focus!"
             on="focus"
           />
           <Popup
             trigger={
               <Button
-                icon="expand"
+                icon="more"
                 content="Context"
                 aria-label="Context button"
                 onClick={this.showAlert}
diff --git a/docs/src/examples/components/Popup/Usage/PopupExampleOnMultiple.shorthand.tsx b/docs/src/examples/components/Popup/Usage/PopupExampleOnMultiple.shorthand.tsx
index b685f74ff7..b3106aae3e 100644
--- a/docs/src/examples/components/Popup/Usage/PopupExampleOnMultiple.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Usage/PopupExampleOnMultiple.shorthand.tsx
@@ -15,14 +15,14 @@ class PopupExampleOnMultiple extends React.Component {
         <Flex gap="gap.smaller" padding="padding.medium">
           <Popup
             trigger={
-              <Button icon="expand" content="Click + Focus" aria-label="Click or focus button" />
+              <Button icon="more" content="Click + Focus" aria-label="Click or focus button" />
             }
             content="Hello from popup on click!"
             on={['click', 'focus']}
           />
           <Popup
             trigger={
-              <Button icon="expand" content="Hover + Focus" aria-label="Hover or focus button" />
+              <Button icon="more" content="Hover + Focus" aria-label="Hover or focus button" />
             }
             content="Hello from popup on hover!"
             on={['hover', 'focus']}
@@ -32,7 +32,7 @@ class PopupExampleOnMultiple extends React.Component {
           <Popup
             trigger={
               <Button
-                icon="expand"
+                icon="more"
                 content="Context + Focus"
                 aria-label="Right click or focus button"
                 onClick={this.showAlert}
@@ -44,7 +44,7 @@ class PopupExampleOnMultiple extends React.Component {
           <Popup
             trigger={
               <Button
-                icon="expand"
+                icon="more"
                 content="Context + Hover"
                 aria-label="Right click or hover button"
                 onClick={this.showAlert}
@@ -56,7 +56,7 @@ class PopupExampleOnMultiple extends React.Component {
           <Popup
             trigger={
               <Button
-                icon="expand"
+                icon="more"
                 content="Context + Hover + Focus"
                 aria-label="Right click or hover or focus button"
                 onClick={this.showAlert}
diff --git a/docs/src/examples/components/Popup/Usage/PopupExampleOnWithFocusTrap.shorthand.tsx b/docs/src/examples/components/Popup/Usage/PopupExampleOnWithFocusTrap.shorthand.tsx
index c5f51d04df..33dfd1d3db 100644
--- a/docs/src/examples/components/Popup/Usage/PopupExampleOnWithFocusTrap.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Usage/PopupExampleOnWithFocusTrap.shorthand.tsx
@@ -21,19 +21,19 @@ class PopupExampleOnWithFocusTrap extends React.Component {
       <>
         <Flex gap="gap.smaller">
           <Popup
-            trigger={<Button icon="expand" content="Click" aria-label="Click button" />}
+            trigger={<Button icon="more" content="Click" aria-label="Click button" />}
             content={contentWithButtons}
             trapFocus
             on="click"
           />
           <Popup
-            trigger={<Button icon="expand" content="Hover" aria-label="Hover button" />}
+            trigger={<Button icon="more" content="Hover" aria-label="Hover button" />}
             content={contentWithButtons}
             trapFocus
             on="hover"
           />
           <Popup
-            trigger={<Button icon="expand" content="Focus" aria-label="Focus button" />}
+            trigger={<Button icon="more" content="Focus" aria-label="Focus button" />}
             content={contentWithButtons}
             trapFocus
             on="focus"
@@ -41,7 +41,7 @@ class PopupExampleOnWithFocusTrap extends React.Component {
           <Popup
             trigger={
               <Button
-                icon="expand"
+                icon="more"
                 content="Context"
                 aria-label="Context button"
                 onClick={this.showAlert}
diff --git a/docs/src/examples/components/Popup/Variations/PopupExampleOffset.shorthand.tsx b/docs/src/examples/components/Popup/Variations/PopupExampleOffset.shorthand.tsx
index b172df0089..1700252048 100644
--- a/docs/src/examples/components/Popup/Variations/PopupExampleOffset.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Variations/PopupExampleOffset.shorthand.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react'
 import { Button, Grid, Popup } from '@stardust-ui/react'
 
-const renderButton = rotateArrowUp => (
+const renderButton = () => (
   <Button
     icon={{
-      name: 'arrow circle up',
-      styles: { transform: `rotate(${rotateArrowUp})` },
+      name: 'arrow-up',
+      circular: true,
+      bordered: true,
+      rotate: -45,
     }}
     styles={{ height: '80px', minWidth: '80px', padding: 0 }}
   />
@@ -17,7 +19,7 @@ const PopupExamplePosition = () => (
       align="start"
       position="above"
       offset="-100%p"
-      trigger={renderButton('-45deg')}
+      trigger={renderButton()}
       content={
         <p>
           The popup is rendered at above-start
diff --git a/docs/src/examples/components/Popup/Variations/PopupExamplePosition.shorthand.tsx b/docs/src/examples/components/Popup/Variations/PopupExamplePosition.shorthand.tsx
index f377b1b5a4..a0b1e43ca7 100644
--- a/docs/src/examples/components/Popup/Variations/PopupExamplePosition.shorthand.tsx
+++ b/docs/src/examples/components/Popup/Variations/PopupExamplePosition.shorthand.tsx
@@ -23,7 +23,12 @@ const PopupExamplePosition = () => {
         align={align}
         position={position}
         unstable_pinned={unstable_pinned}
-        trigger={<Button icon={icons[position]} styles={buttonStyles} />}
+        trigger={
+          <Button
+            icon={{ name: iconNames[position], circular: true, bordered: true }}
+            styles={buttonStyles}
+          />
+        }
         content={
           <p>
             The popup is rendered {position} the trigger
@@ -53,11 +58,11 @@ const positionAndAlignValues = [
   'after-bottom',
 ]
 
-const icons: Record<Position, string> = {
-  above: 'arrow circle up',
-  below: 'arrow circle down',
-  before: 'arrow circle left',
-  after: 'arrow circle right',
+const iconNames: Record<Position, string> = {
+  above: 'arrow-up',
+  below: 'arrow-down',
+  before: 'arrow-left',
+  after: 'arrow-right',
 }
 
 const paddings: Record<string, React.CSSProperties['padding']> = {
diff --git a/docs/src/examples/components/Popup/Variations/PopupExamplePosition.tsx b/docs/src/examples/components/Popup/Variations/PopupExamplePosition.tsx
index 52947014be..bd5e1fc84b 100644
--- a/docs/src/examples/components/Popup/Variations/PopupExamplePosition.tsx
+++ b/docs/src/examples/components/Popup/Variations/PopupExamplePosition.tsx
@@ -31,7 +31,10 @@ const PopupExamplePosition = () => {
           </p>
         }
       >
-        <Button icon={icons[position]} styles={buttonStyles} />
+        <Button
+          icon={{ name: iconNames[position], circular: true, bordered: true }}
+          styles={buttonStyles}
+        />
       </Popup>
     </Grid>
   )
@@ -54,11 +57,11 @@ const positionAndAlignValues = [
   'after-bottom',
 ]
 
-const icons: Record<Position, string> = {
-  above: 'arrow circle up',
-  below: 'arrow circle down',
-  before: 'arrow circle left',
-  after: 'arrow circle right',
+const iconNames: Record<Position, string> = {
+  above: 'arrow-up',
+  below: 'arrow-down',
+  before: 'arrow-left',
+  after: 'arrow-right',
 }
 
 const paddings: Record<string, React.CSSProperties['padding']> = {
diff --git a/docs/src/examples/components/Provider/Types/ProviderDisableAnimationsExample.tsx b/docs/src/examples/components/Provider/Types/ProviderDisableAnimationsExample.tsx
index 1ccacafac0..b7f8655234 100644
--- a/docs/src/examples/components/Provider/Types/ProviderDisableAnimationsExample.tsx
+++ b/docs/src/examples/components/Provider/Types/ProviderDisableAnimationsExample.tsx
@@ -16,7 +16,7 @@ const spinner = {
 
 const AnimatedIcon = () => (
   <Animation name="spinner">
-    <Icon name="umbrella" circular bordered />
+    <Icon name="mention" circular bordered />
   </Animation>
 )
 
diff --git a/docs/src/examples/components/Reaction/Rtl/ReactionExample.rtl.tsx b/docs/src/examples/components/Reaction/Rtl/ReactionExample.rtl.tsx
index 05e969de14..4b3d3dfd27 100644
--- a/docs/src/examples/components/Reaction/Rtl/ReactionExample.rtl.tsx
+++ b/docs/src/examples/components/Reaction/Rtl/ReactionExample.rtl.tsx
@@ -4,8 +4,8 @@ import { Reaction } from '@stardust-ui/react'
 const ReactionGroupExampleRtl = () => (
   <Reaction.Group
     items={[
-      { icon: 'thumbs up', content: '2 الإعجابات', key: 'up' },
-      { icon: 'thumbs down', content: '10 يكره', key: 'down' },
+      { icon: 'like', content: '2 الإعجابات', key: 'up' },
+      { icon: 'emoji', content: '10 ابتسامة', key: 'smile' },
     ]}
   />
 )
diff --git a/docs/src/examples/components/Reaction/Types/ReactionExample.shorthand.tsx b/docs/src/examples/components/Reaction/Types/ReactionExample.shorthand.tsx
index ad9d0a6e41..d4439b37dc 100644
--- a/docs/src/examples/components/Reaction/Types/ReactionExample.shorthand.tsx
+++ b/docs/src/examples/components/Reaction/Types/ReactionExample.shorthand.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { Reaction } from '@stardust-ui/react'
 
-const ReactionExample = () => <Reaction icon="thumbs up" content={10} />
+const ReactionExample = () => <Reaction icon="like" content={10} />
 
 export default ReactionExample
diff --git a/docs/src/examples/components/Reaction/Types/ReactionGroupExample.shorthand.tsx b/docs/src/examples/components/Reaction/Types/ReactionGroupExample.shorthand.tsx
index e4648d85a7..a77280e9a7 100644
--- a/docs/src/examples/components/Reaction/Types/ReactionGroupExample.shorthand.tsx
+++ b/docs/src/examples/components/Reaction/Types/ReactionGroupExample.shorthand.tsx
@@ -4,8 +4,8 @@ import { Reaction } from '@stardust-ui/react'
 const ReactionGroupExample = () => (
   <Reaction.Group
     items={[
-      { icon: 'thumbs up', content: '2K', key: 'up' },
-      { icon: 'thumbs down', content: 10, key: 'down' },
+      { icon: 'like', content: '2K', key: 'up' },
+      { icon: 'emoji', content: 10, key: 'smile' },
     ]}
   />
 )
diff --git a/docs/src/examples/components/Status/Variations/StatusCustomExample.shorthand.tsx b/docs/src/examples/components/Status/Variations/StatusCustomExample.shorthand.tsx
index 7059da6bed..474de80e99 100644
--- a/docs/src/examples/components/Status/Variations/StatusCustomExample.shorthand.tsx
+++ b/docs/src/examples/components/Status/Variations/StatusCustomExample.shorthand.tsx
@@ -3,11 +3,11 @@ import { Status } from '@stardust-ui/react'
 
 const StatusCustomExampleShorthand = () => (
   <div>
-    <Status color="orange" icon="clock" title="Be right back" />
+    <Status color="orange" icon="call-pstn" title="In call" />
     &emsp;
-    <Status color="blue" icon="home" title="Working from home" />
+    <Status color="blue" icon="onedrive" title="Working from the sky" />
     &emsp;
-    <Status color="red" icon="minus" title="Do not disturb" />
+    <Status color="red" icon="ban" title="Offline" />
   </div>
 )
 
diff --git a/docs/src/examples/components/Status/Variations/StatusIconExample.shorthand.tsx b/docs/src/examples/components/Status/Variations/StatusIconExample.shorthand.tsx
index 26837366f4..f7e8492ce8 100644
--- a/docs/src/examples/components/Status/Variations/StatusIconExample.shorthand.tsx
+++ b/docs/src/examples/components/Status/Variations/StatusIconExample.shorthand.tsx
@@ -3,9 +3,9 @@ import { Status } from '@stardust-ui/react'
 
 const StatusIconExampleShorthand = () => (
   <div>
-    <Status state="success" icon="check" title="available" />
+    <Status state="success" icon="stardust-checkmark" title="available" />
     &emsp;
-    <Status state="error" icon="minus" title="busy" />
+    <Status state="error" icon="ban" title="offline" />
   </div>
 )
 
diff --git a/docs/src/examples/components/Tooltip/States/TooltipOpenControlledExample.shorthand.tsx b/docs/src/examples/components/Tooltip/States/TooltipOpenControlledExample.shorthand.tsx
index 38202b5b17..6fa6bcd222 100644
--- a/docs/src/examples/components/Tooltip/States/TooltipOpenControlledExample.shorthand.tsx
+++ b/docs/src/examples/components/Tooltip/States/TooltipOpenControlledExample.shorthand.tsx
@@ -9,7 +9,7 @@ const TooltipOpenExample = () => {
     <Tooltip
       open={open}
       onOpenChange={(e, data) => setOpen(data.open)}
-      trigger={<Button icon="expand" />}
+      trigger={<Button icon="more" />}
       content="This is a controlled Tooltip"
     />
   )
diff --git a/docs/src/examples/components/Tooltip/States/TooltipOpenControlledExample.tsx b/docs/src/examples/components/Tooltip/States/TooltipOpenControlledExample.tsx
index 31ad1cb492..c8e3e0d43e 100644
--- a/docs/src/examples/components/Tooltip/States/TooltipOpenControlledExample.tsx
+++ b/docs/src/examples/components/Tooltip/States/TooltipOpenControlledExample.tsx
@@ -11,7 +11,7 @@ const TooltipOpenExample = () => {
       onOpenChange={(e, data) => setOpen(data.open)}
       content="This is a controlled Tooltip"
     >
-      <Button icon="expand" />
+      <Button icon="more" />
     </Tooltip>
   )
 }
diff --git a/docs/src/examples/components/Tooltip/Types/TooltipExamplePointing.shorthand.tsx b/docs/src/examples/components/Tooltip/Types/TooltipExamplePointing.shorthand.tsx
index 91e76b79c0..f51959667e 100644
--- a/docs/src/examples/components/Tooltip/Types/TooltipExamplePointing.shorthand.tsx
+++ b/docs/src/examples/components/Tooltip/Types/TooltipExamplePointing.shorthand.tsx
@@ -2,7 +2,7 @@ import * as React from 'react'
 import { Button, Tooltip } from '@stardust-ui/react'
 
 const TooltipExamplePointing = () => (
-  <Tooltip open pointing trigger={<Button icon="expand" />} content="The tooltip is pointing." />
+  <Tooltip open pointing trigger={<Button icon="more" />} content="The tooltip is pointing." />
 )
 
 export default TooltipExamplePointing
diff --git a/docs/src/examples/components/Tooltip/Types/TooltipExamplePointing.tsx b/docs/src/examples/components/Tooltip/Types/TooltipExamplePointing.tsx
index 5ea796a74d..474efb085f 100644
--- a/docs/src/examples/components/Tooltip/Types/TooltipExamplePointing.tsx
+++ b/docs/src/examples/components/Tooltip/Types/TooltipExamplePointing.tsx
@@ -3,7 +3,7 @@ import { Button, Tooltip } from '@stardust-ui/react'
 
 const TooltipExamplePointing = () => (
   <Tooltip open pointing content="The tooltip is pointing.">
-    <Button icon="expand" />
+    <Button icon="more" />
   </Tooltip>
 )
 
diff --git a/docs/src/examples/components/Tooltip/Usage/TooltipExampleTarget.shorthand.tsx b/docs/src/examples/components/Tooltip/Usage/TooltipExampleTarget.shorthand.tsx
index 15509b5986..555e5c807c 100644
--- a/docs/src/examples/components/Tooltip/Usage/TooltipExampleTarget.shorthand.tsx
+++ b/docs/src/examples/components/Tooltip/Usage/TooltipExampleTarget.shorthand.tsx
@@ -9,7 +9,7 @@ const TooltipExampleTarget = () => {
       {/* CUSTOM DOM ELEMENT is used as target for Tooltip */}
       <Tooltip
         target={target}
-        trigger={<Button icon="question" circular styles={{ cursor: 'pointer' }} />}
+        trigger={<Button icon="qna" circular styles={{ cursor: 'pointer' }} />}
         content="well, yes, I am just a garbish text ¯\_(ツ)_/¯"
         position="below"
       />
diff --git a/docs/src/examples/components/Tooltip/Usage/TooltipExampleTarget.tsx b/docs/src/examples/components/Tooltip/Usage/TooltipExampleTarget.tsx
index 0ab4e09370..ffb604ca91 100644
--- a/docs/src/examples/components/Tooltip/Usage/TooltipExampleTarget.tsx
+++ b/docs/src/examples/components/Tooltip/Usage/TooltipExampleTarget.tsx
@@ -12,7 +12,7 @@ const TooltipExampleTarget = () => {
         content="well, yes, I am just a garbish text ¯\_(ツ)_/¯"
         position="below"
       >
-        <Button icon="question" circular styles={{ cursor: 'pointer' }} />
+        <Button icon="qna" circular styles={{ cursor: 'pointer' }} />
       </Tooltip>
       <div style={{ marginLeft: 10 }}>
         <Text>Could you guess what does this text means? :)</Text>
diff --git a/docs/src/pages/ShorthandProps.mdx b/docs/src/pages/ShorthandProps.mdx
index 974416154a..7a9ae66ddf 100644
--- a/docs/src/pages/ShorthandProps.mdx
+++ b/docs/src/pages/ShorthandProps.mdx
@@ -18,7 +18,7 @@ Each component's slot has associated default element type. For example, by defau
 
 ```jsx
 // 💡 'name' and 'size' will be used as <Icon /> element's props
-<Button icon={{ name: 'camera', size: 'small' }} />
+<Button icon={{ name: 'call-video', size: 'small' }} />
 ```
 
 ## Primitive as value
@@ -33,7 +33,7 @@ will be used as icon's `name`:
 <>
   <Button icon="camera" />
   {/* 💡 has identical effect to the previous one */}
-  <Button icon={{ name: 'camera' }} />
+  <Button icon={{ name: 'call-video' }} />
 </>
 ```
 
@@ -67,7 +67,7 @@ powerful option for customizing component's slot. The only requirements for this
 Thus, in its simplest form, it could be used the following way:
 
 ```jsx
-<Button icon={() => <Icon name="chess rook" />} />
+<Button icon={() => <Icon name="emoji" />} />
 ```
 
 However, if it will be just about that, this function form wouldn't introduce any additional value. So, lets take a look on the scenarios where it is really helpful.
@@ -83,11 +83,11 @@ Here is an example that represents this:
 ```jsx
 <>
   {/* All three have the same effect: */}
-  <Button icon="chess rook" />
+  <Button icon="emoji" />
   {/* render() transforms string to <Icon /> element */}
-  <Button icon={render => render('chess rook')} />
+  <Button icon={render => render('emoji')} />
   {/* render() transforms object to <Icon /> element */}
-  <Button icon={render => render({ name: 'chess rook' })} />
+  <Button icon={render => render({ name: 'emoji' })} />
 </>
 ```
 
@@ -162,12 +162,12 @@ element.
   icon={render =>
     render(
       /* what to render */
-      { name: 'chess rook' },
+      { name: 'emoji' },
 
       /* how to render */
       (ComponentType, props) => (
         <div class="my-icon-container">
-          <i class="my-chess-rook-icon" {...props.accessibility.root} />
+          <i class="my-emoji-icon" {...props.accessibility.root} />
         </div>
       ),
     )
diff --git a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx
index 4614a2a9d7..6be7f7d47d 100644
--- a/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx
+++ b/docs/src/prototypes/chatMessages/ChatMessageWithPopover/ChatWithPopover.tsx
@@ -19,9 +19,9 @@ const reactions: ShorthandCollection<ReactionProps> = [
     variables: { meReacting: true },
   },
   {
-    icon: 'thumbs down',
+    icon: 'emoji',
     content: 2,
-    key: 'dislikes',
+    key: 'smiles',
   },
 ]
 
diff --git a/docs/src/views/Accessibility.tsx b/docs/src/views/Accessibility.tsx
index 660eade13e..1913ed3648 100644
--- a/docs/src/views/Accessibility.tsx
+++ b/docs/src/views/Accessibility.tsx
@@ -152,8 +152,8 @@ export default () => (
     <CodeSnippet
       value={`
         <>
-          <Button icon='envelope' />
-          <Button icon='envelope' aria-label='Send message' />
+          <Button icon='email' />
+          <Button icon='email' aria-label='Send message' />
           <Radio aria-label='Include history from the past day. Press TAB to change the number of days.' />
         </>
       `}
@@ -405,14 +405,14 @@ export default () => (
     <p>Example:</p>
     <CodeSnippet
       value={`
-        <Button icon="book" aria-label="Confirm booking" primary />
+        <Button icon="add" aria-label="Add item to list" primary />
       `}
     />
     <p>Rendered HTML:</p>
     <CodeSnippet
       mode="html"
       value={`
-        <button class="ui-button" aria-label="Confirm booking">
+        <button class="ui-button" aria-label="Add item to list">
           <span class="ui-icon" color="white"></span>
         </button>
       `}
diff --git a/docs/src/views/Layout.tsx b/docs/src/views/Layout.tsx
index 03fb359dc4..a23e787215 100644
--- a/docs/src/views/Layout.tsx
+++ b/docs/src/views/Layout.tsx
@@ -172,7 +172,7 @@ export default () => (
     <ExampleSnippet
       render={() => (
         <Flex space="between">
-          <Button content="Logo" icon="chess rook" />
+          <Button content="Logo" icon="emoji" />
 
           <Flex gap="gap.small">
             <Button content="Page 1" />
@@ -189,7 +189,7 @@ export default () => (
     <ExampleSnippet
       render={() => (
         <Flex gap="gap.small">
-          <Button content="Logo" icon="chess rook" />
+          <Button content="Logo" icon="emoji" />
           <Flex.Item push>
             <Button content="Page 1" />
           </Flex.Item>
diff --git a/docs/src/views/QuickStart.tsx b/docs/src/views/QuickStart.tsx
index a03dcdd54b..a2506f9263 100644
--- a/docs/src/views/QuickStart.tsx
+++ b/docs/src/views/QuickStart.tsx
@@ -17,7 +17,7 @@ export default () => (
       Stardust components are styled using CSS in JS. This technique requires a style renderer to
       render JavaScript objects to CSS.{' '}
       <a href="https://reactjs.org/docs/context.html" target="_blank" rel="noopener nofollow">
-        React Context <Icon name="external" size="small" />
+        React Context <Icon name="open-outside" size="small" />
       </a>{' '}
       is used to provide the style renderer and theme to components.
     </p>
@@ -49,7 +49,7 @@ export default () => (
         import React from 'react'
         import { Button } from '@stardust-ui/react'
 
-        export default () => <Button content="Theming" icon="arrow right" iconPosition="after" primary />
+        export default () => <Button content="Theming" icon="arrow-right" iconPosition="after" primary />
       `}
     />
 
diff --git a/docs/src/views/Theming.tsx b/docs/src/views/Theming.tsx
index 32af9d5963..d3ee0d4e8f 100644
--- a/docs/src/views/Theming.tsx
+++ b/docs/src/views/Theming.tsx
@@ -86,8 +86,8 @@ export default () => (
     <ExampleSnippet
       render={() => (
         <>
-          <Icon name="user" circular />
-          <Icon name="user" circular variables={{ color: 'cornflowerblue' }} />
+          <Icon name="calendar" circular />
+          <Icon name="calendar" circular variables={{ color: 'cornflowerblue' }} />
         </>
       )}
     />
@@ -99,13 +99,13 @@ export default () => (
     <ExampleSnippet
       render={() => (
         <>
-          <Icon name="user" circular />
-          <Icon name="user" circular />
+          <Icon name="calendar" circular />
+          <Icon name="calendar" circular />
 
           <Provider theme={{ componentVariables: { Icon: { color: 'cornflowerblue' } } }}>
             <span>
-              <Icon name="user" circular />
-              <Icon name="user" circular />
+              <Icon name="calendar" circular />
+              <Icon name="calendar" circular />
             </span>
           </Provider>
         </>
@@ -141,7 +141,10 @@ export default () => (
     </p>
     <ExampleSnippet
       render={() => (
-        <Button icon={{ name: 'user', styles: { boxShadow: '0 0 0 2px red' } }} content="Profile" />
+        <Button
+          icon={{ name: 'calendar', styles: { boxShadow: '0 0 0 2px red' } }}
+          content="Profile"
+        />
       )}
     />
 
@@ -157,8 +160,8 @@ export default () => (
     <ExampleSnippet
       render={() => (
         <>
-          <Button icon="user" content="Profile" />
-          <Button icon="user" content="Profile" />
+          <Button icon="calendar" content="Profile" />
+          <Button icon="calendar" content="Profile" />
 
           <Provider
             theme={{
@@ -172,8 +175,8 @@ export default () => (
             }}
           >
             <span>
-              <Button icon="user" content="Profile" />
-              <Button icon="user" content="Profile" />
+              <Button icon="calendar" content="Profile" />
+              <Button icon="calendar" content="Profile" />
             </span>
           </Provider>
         </>
@@ -239,9 +242,9 @@ export default () => (
         >
           <div>
             <Animation name="spinner">
-              <Icon name="user" circular />
+              <Icon name="calendar" circular />
             </Animation>
-            <Icon name="book" animation="spinner" circular />
+            <Icon name="emoji" animation="spinner" circular />
           </div>
         </Provider>
       )}
@@ -278,10 +281,10 @@ export default () => (
         >
           <div>
             <Animation name="spinner" delay="2s" duration="1s">
-              <Icon name="user" circular />
+              <Icon name="calendar" circular />
             </Animation>
             <Icon
-              name="book"
+              name="emoji"
               animation={{ name: 'spinner', delay: '5s', duration: '2s' }}
               circular
             />
diff --git a/docs/src/views/ThemingExamples.tsx b/docs/src/views/ThemingExamples.tsx
index 1d731e9e34..2adb1a7c94 100644
--- a/docs/src/views/ThemingExamples.tsx
+++ b/docs/src/views/ThemingExamples.tsx
@@ -49,18 +49,18 @@ export default () => (
         export default () =>
          <Provider theme={themes.teams}>
             <Button content="Button" />
-            <Button icon="plus" iconOnly primary />
-            <Button icon="at" content="Send email" secondary />
-            <Icon name="chess rook" size="larger" />
+            <Button icon="add" iconOnly primary />
+            <Button icon="email" content="Send email" secondary />
+            <Icon name="emoji" size="larger" />
             <Label content="Label with icon" icon="close" />
          </Provider>
       `}
       render={() => (
         <>
           <Button content="Button" />
-          <Button icon="plus" iconOnly primary />
-          <Button icon="at" content="Send email" secondary />
-          <Icon name="chess rook" size="larger" />
+          <Button icon="add" iconOnly primary />
+          <Button icon="email" content="Send email" secondary />
+          <Icon name="emoji" size="larger" />
           <Label content="Label with icon" icon="close" />
         </>
       )}
@@ -90,7 +90,7 @@ export default () => (
           <Button
             content="Send email"
             icon={{
-              name: "at",
+              name: "email",
               styles: { color: "brown" },
             }}
             secondary
@@ -102,7 +102,7 @@ export default () => (
       render={() => (
         <Button
           content="Send email"
-          icon={{ name: 'at', styles: { color: 'brown' } }}
+          icon={{ name: 'email', styles: { color: 'brown' } }}
           styles={{
             color: 'coral',
             backgroundColor: 'charcoal',
@@ -222,9 +222,9 @@ export default () => (
           <Provider theme={theme}>
             <div>
               <Button content="Button" />
-              <Button icon="plus" iconOnly primary />
-              <Button icon="at" content="Send email" secondary />
-              <Icon name="chess rook" size="larger" />
+              <Button icon="add" iconOnly primary />
+              <Button icon="email" content="Send email" secondary />
+              <Icon name="emoji" size="larger" />
               <Label content="Label with icon" icon="close" />
             </div>
           </Provider>
@@ -266,9 +266,9 @@ export default () => (
           >
             <div>
               <Button content="Button" />
-              <Button icon="plus" iconOnly primary />
-              <Button icon="at" content="Send email" secondary />
-              <Icon name="chess rook" size="larger" />
+              <Button icon="add" iconOnly primary />
+              <Button icon="email" content="Send email" secondary />
+              <Icon name="emoji" size="larger" />
               <Label content="Label with icon" icon="close" />
             </div>
           </Provider>
@@ -287,9 +287,9 @@ export default () => (
           {/* Default theming */}
           <Header as="h3" content="Default theming" />
           <Button content="Button" />
-          <Button icon="plus" iconOnly primary />
-          <Button icon="at" content="Send email" secondary />
-          <Icon name="chess rook" size="larger" />
+          <Button icon="add" iconOnly primary />
+          <Button icon="email" content="Send email" secondary />
+          <Icon name="emoji" size="larger" />
           <Label content="Label with icon" icon="close" />
 
           {/* First nested theming */}
@@ -307,9 +307,9 @@ export default () => (
               <Header as="h3" content="First nested theming" />
 
               <Button content="Button" />
-              <Button icon="plus" iconOnly primary />
-              <Button icon="at" content="Send email" secondary />
-              <Icon name="chess rook" size="larger" />
+              <Button icon="add" iconOnly primary />
+              <Button icon="email" content="Send email" secondary />
+              <Icon name="emoji" size="larger" />
               <Label content="Label with icon" icon="close" />
 
               {/* Second nested theming */}
@@ -327,8 +327,8 @@ export default () => (
 
                   <Button content="Button" />
                   <Button icon="plus" iconOnly primary />
-                  <Button icon="at" content="Send email" secondary />
-                  <Icon name="chess rook" size="larger" />
+                  <Button icon="email" content="Send email" secondary />
+                  <Icon name="emoji" size="larger" />
                   <Label content="Label with icon" icon="close" />
                 </div>
               </Provider>
@@ -340,9 +340,9 @@ export default () => (
         <div>
           <Header as="h3" content="Default theming" />
           <Button content="Button" />
-          <Button icon="plus" iconOnly primary />
-          <Button icon="at" content="Send email" secondary />
-          <Icon name="chess rook" size="larger" />
+          <Button icon="add" iconOnly primary />
+          <Button icon="email" content="Send email" secondary />
+          <Icon name="emoji" size="larger" />
           <Label content="Label with icon" icon="close" />
 
           <Provider
@@ -358,9 +358,9 @@ export default () => (
               <Header as="h3" content="First nested theming" />
 
               <Button content="Button" />
-              <Button icon="plus" iconOnly primary />
-              <Button icon="at" content="Send email" secondary />
-              <Icon name="chess rook" size="larger" />
+              <Button icon="add" iconOnly primary />
+              <Button icon="email" content="Send email" secondary />
+              <Icon name="emoji" size="larger" />
               <Label content="Label with icon" icon="close" />
 
               <Provider
@@ -376,9 +376,9 @@ export default () => (
                   <Header as="h3" content="Second nested theming" />
 
                   <Button content="Button" />
-                  <Button icon="plus" iconOnly primary />
-                  <Button icon="at" content="Send email" secondary />
-                  <Icon name="chess rook" size="larger" />
+                  <Button icon="add" iconOnly primary />
+                  <Button icon="email" content="Send email" secondary />
+                  <Icon name="emoji" size="larger" />
                   <Label content="Label with icon" icon="close" />
                 </>
               </Provider>
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/arrowLeft.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/arrowLeft.tsx
new file mode 100644
index 0000000000..b0d8d50b79
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Icon/svg/icons/arrowLeft.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react'
+import { TeamsProcessedSvgIconSpec } from '../types'
+
+export default {
+  icon: ({ classes }) => (
+    <svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
+      <path d="M9.1 15.9l4 4c.2.2.5.2.7 0s.2-.5 0-.7L10.7 16h11.8c.3 0 .5-.2.5-.5s-.2-.5-.5-.5H10.7l3.1-3.1c.2-.2.2-.5 0-.7 0-.2-.2-.2-.3-.2s-.3 0-.4.1l-4 4c-.1.2-.1.6 0 .8z" />
+    </svg>
+  ),
+  styles: {},
+} as TeamsProcessedSvgIconSpec
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/arrowRight.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/arrowRight.tsx
new file mode 100644
index 0000000000..606e689560
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Icon/svg/icons/arrowRight.tsx
@@ -0,0 +1,11 @@
+import * as React from 'react'
+import { TeamsProcessedSvgIconSpec } from '../types'
+
+export default {
+  icon: ({ classes }) => (
+    <svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
+      <path d="M22.9 15.1l-4-4c-.2-.2-.5-.2-.7 0s-.2.5 0 .7l3.1 3.1H9.5c-.3.1-.5.3-.5.6s.2.5.5.5h11.8l-3.1 3.1c-.2.2-.2.5 0 .7.1.1.2.1.4.1s.3 0 .4-.1l4-4c0-.1 0-.5-.1-.7z" />
+    </svg>
+  ),
+  styles: {},
+} as TeamsProcessedSvgIconSpec
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts b/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts
index a0ab6f44a4..f07c125ece 100644
--- a/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts
+++ b/packages/react/src/themes/teams/components/Icon/svg/icons/index.ts
@@ -5,6 +5,8 @@ import add from './add'
 import addParticipant from './addParticipant'
 import arrowUp from './arrowUp'
 import arrowDown from './arrowDown'
+import arrowLeft from './arrowLeft'
+import arrowRight from './arrowRight'
 import ban from './ban'
 import bold from './bold'
 import bookmark from './bookmark'
@@ -153,6 +155,8 @@ export default {
   add,
   'arrow-up': arrowUp,
   'arrow-down': arrowDown,
+  'arrow-left': arrowLeft,
+  'arrow-right': arrowRight,
   ban,
   bold,
   bookmark,