diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2edf5a517d..61ac515fb6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Restrict Typescript checks for component props @kuzhelov ([#1290](https://github.com/stardust-ui/react/pull/1290))
 - Aligned focus styles for `Chat.Message` component with latest Teams theme design @Bugaa92 ([#1269](https://github.com/stardust-ui/react/pull/1269))
 - Fix styles for `fill` prop of `Flex` @kuzhelov ([#1352](https://github.com/stardust-ui/react/pull/1352))
+- FontAwesome icons is not part of Teams theme more @layershifter ([#1337](https://github.com/stardust-ui/react/pull/1337))
 
 ### Fixes
 - Fixed `Flex.Item` children prop type @mnajdova ([#1320](https://github.com/stardust-ui/react/pull/1320))
@@ -35,6 +36,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Highlight options by character keys in `Dropdown` non-search versions @silviuavram ([#1270](https://github.com/stardust-ui/react/pull/1270))
 - Aligned link styles for `Chat.Message` component with latest Teams theme design @Bugaa92 ([#1269](https://github.com/stardust-ui/react/pull/1269))
 - Export `qna` and `yammer` SVG icons for `Teams` theme @manindr ([#1325](https://github.com/stardust-ui/react/pull/1325))
+- Add FontAwesome theme @layershifter ([#1337](https://github.com/stardust-ui/react/pull/1337))
 
 ### Documentation
 - Clearly identify Slots in DocSite @hughreeling ([#1292](https://github.com/stardust-ui/react/pull/1292))
diff --git a/docs/src/app.tsx b/docs/src/app.tsx
index 4ac8f53420..814294ef66 100644
--- a/docs/src/app.tsx
+++ b/docs/src/app.tsx
@@ -20,7 +20,7 @@ class App extends React.Component<any, ThemeContextData> {
       <ThemeContext.Provider value={this.state}>
         <Provider
           as={React.Fragment}
-          theme={mergeThemes(themes[themeName], {
+          theme={mergeThemes(themes.fontAwesome, themes[themeName], {
             // adjust Teams' theme to Semantic UI's font size scheme
             staticStyles: [
               {
diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index c67e10b78a..4d87356cc6 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -498,7 +498,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
       description,
       title,
     } = this.props
-    const { showCode, showRtl, showTransparent } = this.state
+    const { showCode, showRtl, showTransparent, themeName } = this.state
 
     return (
       <Flex column>
@@ -540,6 +540,7 @@ class ComponentExample extends React.Component<ComponentExampleProps, ComponentE
               render={this.renderElement}
               renderHtml={showCode}
               resolver={importResolver}
+              themeName={themeName}
             >
               <Provider.Consumer
                 render={({ siteVariables }) => {
diff --git a/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx b/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
index f2f012ba58..5a9140afe9 100644
--- a/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
+++ b/docs/src/examples/components/Avatar/Variations/AvatarExampleImageCustomization.shorthand.tsx
@@ -18,7 +18,7 @@ const AvatarExampleImageCustomizationShorthand = () => (
         // This example does not react to the avatar size variable
         // and otherwise produces bad results when border is applied compared to "normal" image
         <Icon
-          name="user"
+          name="lock"
           circular
           bordered
           variables={{ color: 'blue' }}
diff --git a/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx b/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx
index 162b82d2dc..c405c62aeb 100644
--- a/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx
+++ b/docs/src/examples/components/Icon/Usage/IconSetExample.shorthand.tsx
@@ -1,46 +1,46 @@
 import * as React from 'react'
-import { Grid, Divider, Header, Icon, Provider } from '@stardust-ui/react'
+import { Grid, Divider, Header, Icon, themes } from '@stardust-ui/react'
 
 const cellStyles = {
   margin: '10px 0',
 }
 
-const IconSetExampleShorthand = () => (
-  <Provider.Consumer
-    render={theme => (
-      <>
-        <div>
-          <Divider>
-            <Header as="h3" content="Regular" />
-          </Divider>
-          <Grid columns={4} styles={{ textAlign: 'center' }}>
-            {Object.keys(theme.icons).map(name => (
-              <div key={name} style={cellStyles}>
-                <Icon name={name} />
-                <br />
-                <code>{name}</code>
-              </div>
-            ))}
-          </Grid>
-        </div>
+const IconSetExampleShorthand: React.FunctionComponent<{ themeName: string }> = ({ themeName }) => (
+  <>
+    <div>
+      <Divider>
+        <Header as="h3" content="Regular" />
+      </Divider>
+      <Grid columns={4} styles={{ textAlign: 'center' }}>
+        {Object.keys(themes[themeName].icons).map(name => (
+          <div key={name} style={cellStyles}>
+            <Icon name={name} />
+            <br />
+            <code>{name}</code>
+          </div>
+        ))}
+      </Grid>
+    </div>
 
-        <div>
-          <Divider>
-            <Header as="h3" content="Outline" />
-          </Divider>
-          <Grid columns={4} styles={{ textAlign: 'center' }}>
-            {Object.keys(theme.icons).map(name => (
-              <div key={`${name}-outline`} style={cellStyles}>
-                <Icon name={name} outline />
-                <br />
-                <code>{name} outline</code>
-              </div>
-            ))}
-          </Grid>
-        </div>
-      </>
-    )}
-  />
+    <div>
+      <Divider>
+        <Header as="h3" content="Outline" />
+      </Divider>
+      <Grid columns={4} styles={{ textAlign: 'center' }}>
+        {Object.keys(themes[themeName].icons).map(name => (
+          <div key={`${name}-outline`} style={cellStyles}>
+            <Icon name={name} outline />
+            <br />
+            <code>{name} outline</code>
+          </div>
+        ))}
+      </Grid>
+    </div>
+  </>
 )
 
+IconSetExampleShorthand.defaultProps = {
+  themeName: 'teams',
+}
+
 export default IconSetExampleShorthand
diff --git a/docs/src/examples/components/RadioGroup/Types/RadioGroupColorPickerExample.shorthand.tsx b/docs/src/examples/components/RadioGroup/Types/RadioGroupColorPickerExample.shorthand.tsx
index 1008f94f66..cf0a0ed32d 100644
--- a/docs/src/examples/components/RadioGroup/Types/RadioGroupColorPickerExample.shorthand.tsx
+++ b/docs/src/examples/components/RadioGroup/Types/RadioGroupColorPickerExample.shorthand.tsx
@@ -17,33 +17,18 @@ class RadioGroupColorPickerExample extends React.Component {
             value: color,
             name: color,
             'aria-label': color,
-            icon: this.createIcon(color),
+            icon: {
+              name: 'stardust-circle',
+              variables: {
+                color,
+              },
+            },
           }))}
           checkedValueChanged={(e, props) => this.setState({ selectedValue: props.value })}
         />
       </div>
     )
   }
-
-  createIcon(value) {
-    const { selectedValue } = this.state
-    const isSelected = selectedValue === value
-
-    return {
-      styles: {
-        backgroundColor: value,
-        border: '1px solid white',
-        ...(isSelected && {
-          border: '1px solid black',
-        }),
-        borderRadius: '3px',
-        ...(isSelected && {
-          backgroundClip: 'content-box',
-          padding: '5px',
-        }),
-      },
-    }
-  }
 }
 
 export default RadioGroupColorPickerExample
diff --git a/packages/react/src/components/Icon/Icon.tsx b/packages/react/src/components/Icon/Icon.tsx
index 5ea97cc4e1..771b9c936b 100644
--- a/packages/react/src/components/Icon/Icon.tsx
+++ b/packages/react/src/components/Icon/Icon.tsx
@@ -1,5 +1,5 @@
 import * as customPropTypes from '@stardust-ui/react-proptypes'
-import * as React from 'react'
+import cx from 'classnames'
 import * as PropTypes from 'prop-types'
 import {
   callable,
@@ -12,9 +12,8 @@ import {
 } from '../../lib'
 import { iconBehavior } from '../../lib/accessibility'
 import { Accessibility } from '../../lib/accessibility/types'
-
-import { SvgIconSpec } from '../../themes/types'
 import { WithAsProp, withSafeTypeForAs } from '../../types'
+import Box from '../Box/Box'
 
 export type IconXSpacing = 'none' | 'before' | 'after' | 'both'
 
@@ -80,46 +79,28 @@ class Icon extends UIComponent<WithAsProp<IconProps>, any> {
     rotate: 0,
   }
 
-  private renderFontIcon(ElementType, classes, unhandledProps, accessibility): React.ReactNode {
-    return (
-      <ElementType
-        className={classes.root}
-        {...accessibility.attributes.root}
-        {...unhandledProps}
-      />
-    )
-  }
-
-  private renderSvgIcon(
-    ElementType,
-    svgIconDescriptor: SvgIconSpec,
-    classes,
-    unhandledProps,
-    accessibility,
-    rtl,
-  ): React.ReactNode {
-    return (
-      <ElementType className={classes.root} {...accessibility.attributes.root} {...unhandledProps}>
-        {svgIconDescriptor && callable(svgIconDescriptor)({ classes, rtl })}
-      </ElementType>
-    )
-  }
-
-  public renderComponent({ ElementType, classes, unhandledProps, accessibility, theme, rtl }) {
+  renderComponent({ ElementType, classes, unhandledProps, accessibility, theme, rtl, styles }) {
+    const { className, name } = this.props
     const { icons = {} } = theme
 
-    const maybeIcon = icons[this.props.name]
-
-    return maybeIcon && maybeIcon.isSvg
-      ? this.renderSvgIcon(
-          ElementType,
-          maybeIcon.icon as SvgIconSpec,
-          classes,
-          unhandledProps,
-          accessibility,
-          rtl,
-        )
-      : this.renderFontIcon(ElementType, classes, unhandledProps, accessibility)
+    const maybeIcon = icons[name]
+    const isSvgIcon = maybeIcon && maybeIcon.isSvg
+
+    return Box.create(
+      { content: isSvgIcon && callable(maybeIcon.icon)({ classes, rtl }) },
+      {
+        defaultProps: {
+          as: ElementType,
+          className: cx(Icon.className, className),
+          ...accessibility.attributes.root,
+          ...unhandledProps,
+          styles: {
+            ...styles.root,
+            ...(isSvgIcon ? styles.svgRoot : styles.fontRoot),
+          },
+        },
+      },
+    )
   }
 }
 
diff --git a/packages/react/src/components/RadioGroup/RadioGroupItem.tsx b/packages/react/src/components/RadioGroup/RadioGroupItem.tsx
index 37b53884b4..9a44ce4127 100644
--- a/packages/react/src/components/RadioGroup/RadioGroupItem.tsx
+++ b/packages/react/src/components/RadioGroup/RadioGroupItem.tsx
@@ -161,11 +161,9 @@ class RadioGroupItem extends AutoControlledComponent<
           {...unhandledProps}
           {...applyAccessibilityKeyHandlers(accessibility.keyHandlers.root, unhandledProps)}
         >
-          {Icon.create(icon || '', {
+          {Icon.create(icon || 'stardust-circle', {
             defaultProps: {
-              circular: true,
-              bordered: true,
-              size: 'smaller',
+              size: 'small',
               styles: styles.icon,
             },
           })}
diff --git a/packages/react/src/themes/base/components/Icon/index.ts b/packages/react/src/themes/base/components/Icon/iconNames.ts
similarity index 82%
rename from packages/react/src/themes/base/components/Icon/index.ts
rename to packages/react/src/themes/base/components/Icon/iconNames.ts
index c31cda83c9..e8185b3470 100644
--- a/packages/react/src/themes/base/components/Icon/index.ts
+++ b/packages/react/src/themes/base/components/Icon/iconNames.ts
@@ -5,6 +5,7 @@ const fontIcon = (content: string): ThemeIconSpec => ({
 })
 
 export const icons: ThemeIcons = {
+  'stardust-circle': fontIcon('25CF'),
   'stardust-close': fontIcon('2715'),
   'stardust-arrow-down': fontIcon('25BE'),
   'stardust-arrow-end': fontIcon('25B8'),
@@ -13,6 +14,6 @@ export const icons: ThemeIcons = {
   'stardust-play': fontIcon('23F8'),
 }
 
-const emptyIcon = { icon: { content: '?' } }
+export const emptyIcon: ThemeIconSpec = { icon: { content: '?' } }
 
 export default (name: string): ThemeIconSpec => icons[name] || emptyIcon
diff --git a/packages/react/src/themes/base/components/Icon/iconStyles.ts b/packages/react/src/themes/base/components/Icon/iconStyles.ts
index aee0a85c5c..170ef239a6 100644
--- a/packages/react/src/themes/base/components/Icon/iconStyles.ts
+++ b/packages/react/src/themes/base/components/Icon/iconStyles.ts
@@ -1,39 +1,9 @@
-import icons from './index'
-import { callable, pxToRem } from '../../../../lib'
+import { pxToRem } from '../../../../lib'
 import { ComponentSlotStylesInput, ICSSInJSStyle, FontIconSpec } from '../../../types'
 import { ResultOf } from '../../../../types'
 import { IconXSpacing, IconProps } from '../../../../components/Icon/Icon'
 import { IconVariables } from './iconVariables'
-
-const getDefaultFontIcon = (iconName: string) => {
-  return callable(icons(iconName).icon)()
-}
-
-const getFontStyles = (
-  size: number,
-  iconName: string,
-  themeIcon?: ResultOf<FontIconSpec>,
-): ICSSInJSStyle => {
-  const { fontFamily, content } = themeIcon || getDefaultFontIcon(iconName)
-  const sizeInRems = pxToRem(size)
-
-  return {
-    fontFamily,
-    fontSize: sizeInRems,
-    lineHeight: 1,
-
-    display: 'inline-flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-
-    width: sizeInRems,
-    height: sizeInRems,
-
-    '::before': {
-      content,
-    },
-  }
-}
+import { emptyIcon } from './iconNames'
 
 const getXSpacingStyles = (xSpacing: IconXSpacing, horizontalSpace: string): ICSSInJSStyle => {
   switch (xSpacing) {
@@ -61,27 +31,39 @@ const getPaddedStyle = (): ICSSInJSStyle => ({
 })
 
 const iconStyles: ComponentSlotStylesInput<IconProps, IconVariables> = {
-  root: ({ props: p, variables: v, theme }): ICSSInJSStyle => {
-    const iconSpec = theme.icons[p.name]
-    const rtl = theme.rtl
-    const isFontBased = p.name && (!iconSpec || !iconSpec.isSvg)
+  root: ({ props: p, variables: v }): ICSSInJSStyle => ({
+    speak: 'none',
+    verticalAlign: 'middle',
+
+    ...getXSpacingStyles(p.xSpacing, v.horizontalSpace),
+
+    ...(p.bordered && getBorderedStyles(v.borderColor)),
+    ...(p.circular && { ...getPaddedStyle(), borderRadius: '50%' }),
+    ...(p.disabled && {
+      color: v.disabledColor,
+    }),
+  }),
+  fontRoot: ({ props: p, variables: v, theme: t }): ICSSInJSStyle => {
+    const iconSpec = t.icons[p.name] || emptyIcon
+    const icon = iconSpec.icon as ResultOf<FontIconSpec>
 
     return {
-      display: 'inline-block',
-      speak: 'none',
-      verticalAlign: 'middle',
-
+      alignItems: 'center',
       boxSizing: 'content-box',
+      display: 'inline-flex',
+      justifyContent: 'center',
 
-      ...(isFontBased && getFontStyles(16, p.name)),
-
-      ...getXSpacingStyles(p.xSpacing, v.horizontalSpace),
-
-      ...(p.circular && { ...getPaddedStyle(), borderRadius: '50%' }),
+      fontFamily: icon.fontFamily,
+      fontSize: v[`${p.size}Size`],
+      lineHeight: 1,
+      width: v[`${p.size}Size`],
+      height: v[`${p.size}Size`],
 
-      ...(p.bordered && getBorderedStyles(v.borderColor)),
+      '::before': {
+        content: icon.content,
+      },
 
-      transform: rtl ? `scaleX(-1) rotate(${-1 * p.rotate}deg)` : `rotate(${p.rotate}deg)`,
+      transform: t.rtl ? `scaleX(-1) rotate(${-1 * p.rotate}deg)` : `rotate(${p.rotate}deg)`,
     }
   },
 }
diff --git a/packages/react/src/themes/base/components/Icon/iconVariables.ts b/packages/react/src/themes/base/components/Icon/iconVariables.ts
index c762998126..49c9cc0fbd 100644
--- a/packages/react/src/themes/base/components/Icon/iconVariables.ts
+++ b/packages/react/src/themes/base/components/Icon/iconVariables.ts
@@ -1,19 +1,34 @@
 import { pxToRem } from '../../../../lib'
 
-export type IconSizeModifier = 'x' | 'xx'
-
 export interface IconVariables {
-  [key: string]: object | string | number | boolean | undefined
-  color?: string
-  borderColor?: string
-
+  color: string
+  borderColor: string
+  backgroundColor: string
+  disabledColor: string
   horizontalSpace: string
+
+  smallestSize: string
+  smallerSize: string
+  smallSize: string
+  mediumSize: string
+  largeSize: string
+  largerSize: string
+  largestSize: string
 }
 
 export default (): IconVariables => ({
   color: undefined,
+  backgroundColor: undefined,
   borderColor: 'black',
   disabledColor: 'gray',
 
   horizontalSpace: pxToRem(10),
+
+  smallestSize: pxToRem(7),
+  smallerSize: pxToRem(10),
+  smallSize: pxToRem(12),
+  mediumSize: pxToRem(16),
+  largeSize: pxToRem(20),
+  largerSize: pxToRem(32),
+  largestSize: pxToRem(40),
 })
diff --git a/packages/react/src/themes/base/index.ts b/packages/react/src/themes/base/index.ts
index a27ca4beee..4701d2a50d 100644
--- a/packages/react/src/themes/base/index.ts
+++ b/packages/react/src/themes/base/index.ts
@@ -2,19 +2,11 @@ import { ThemeInput } from '../types'
 import * as siteVariables from './siteVariables'
 import * as componentVariables from './componentVariables'
 import * as componentStyles from './componentStyles'
-import { FontIconSpec, ThemeIconSpec, ThemeIcons } from 'src/themes/types'
-import { default as fontIcons, icons } from './components/Icon/index'
-
-const declareFontBased = (fontIcon: FontIconSpec): ThemeIconSpec => ({ icon: fontIcon })
-
-const themeIcons: ThemeIcons = {}
-Object.keys(icons).forEach(iconName => {
-  themeIcons[iconName] = declareFontBased(fontIcons[iconName])
-})
+import { icons } from './components/Icon/iconNames'
 
 export default {
   siteVariables,
-  icons: themeIcons,
+  icons,
   componentVariables,
   componentStyles,
 } as ThemeInput
diff --git a/packages/react/src/themes/font-awesome/componentStyles.ts b/packages/react/src/themes/font-awesome/componentStyles.ts
new file mode 100644
index 0000000000..a9451a9c5b
--- /dev/null
+++ b/packages/react/src/themes/font-awesome/componentStyles.ts
@@ -0,0 +1 @@
+export { default as Icon } from './components/Icon/iconStyles'
diff --git a/packages/react/src/themes/teams/components/Icon/fontAwesomeIconStyles.ts b/packages/react/src/themes/font-awesome/components/Icon/iconNames.ts
similarity index 99%
rename from packages/react/src/themes/teams/components/Icon/fontAwesomeIconStyles.ts
rename to packages/react/src/themes/font-awesome/components/Icon/iconNames.ts
index 71a31ac268..5c26bcedfa 100644
--- a/packages/react/src/themes/teams/components/Icon/fontAwesomeIconStyles.ts
+++ b/packages/react/src/themes/font-awesome/components/Icon/iconNames.ts
@@ -1311,6 +1311,4 @@ const fontAwesomeIcons: ThemeIcons = {
   'star empty': outline('f089'),
 }
 
-const emptyIcon = { icon: { content: '?', fontFamily: '' } }
-
-export default (name: string): ThemeIconSpec => fontAwesomeIcons[name] || emptyIcon
+export default fontAwesomeIcons
diff --git a/packages/react/src/themes/font-awesome/components/Icon/iconStyles.ts b/packages/react/src/themes/font-awesome/components/Icon/iconStyles.ts
new file mode 100644
index 0000000000..7a10d17be2
--- /dev/null
+++ b/packages/react/src/themes/font-awesome/components/Icon/iconStyles.ts
@@ -0,0 +1,11 @@
+import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
+import { IconProps } from '../../../../components/Icon/Icon'
+import { IconVariables } from '../../../teams/components/Icon/iconVariables'
+
+const iconStyles: ComponentSlotStylesInput<IconProps, IconVariables> = {
+  fontRoot: (): ICSSInJSStyle => ({
+    fontWeight: 900, // required for the fontAwesome to render
+  }),
+}
+
+export default iconStyles
diff --git a/packages/react/src/themes/font-awesome/index.ts b/packages/react/src/themes/font-awesome/index.ts
new file mode 100644
index 0000000000..32db8097e7
--- /dev/null
+++ b/packages/react/src/themes/font-awesome/index.ts
@@ -0,0 +1,8 @@
+import { ThemeInput } from '../types'
+import * as componentStyles from './componentStyles'
+import { default as icons } from './components/Icon/iconNames'
+
+export default {
+  icons,
+  componentStyles,
+} as ThemeInput
diff --git a/packages/react/src/themes/index.ts b/packages/react/src/themes/index.ts
index 307003da5e..cfc58cf133 100644
--- a/packages/react/src/themes/index.ts
+++ b/packages/react/src/themes/index.ts
@@ -1,5 +1,6 @@
 // Themes
 export { default as base } from './base'
+export { default as fontAwesome } from './font-awesome'
 export { default as teams } from './teams'
 export { default as teamsDark } from './teams-dark'
 export { default as teamsHighContrast } from './teams-high-contrast'
diff --git a/packages/react/src/themes/teams/components/Icon/font/index.ts b/packages/react/src/themes/teams/components/Icon/font/index.ts
deleted file mode 100644
index c938192460..0000000000
--- a/packages/react/src/themes/teams/components/Icon/font/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { FontIconSpec } from '../../../../types'
-
-export default {} as { [key: string]: FontIconSpec }
diff --git a/packages/react/src/themes/teams/components/Icon/iconStyles.ts b/packages/react/src/themes/teams/components/Icon/iconStyles.ts
index af049d9518..5359a8be03 100644
--- a/packages/react/src/themes/teams/components/Icon/iconStyles.ts
+++ b/packages/react/src/themes/teams/components/Icon/iconStyles.ts
@@ -1,27 +1,11 @@
 import * as _ from 'lodash'
 
-import fontAwesomeIcons from './fontAwesomeIconStyles'
 import { callable, pxToRem, SizeValue } from '../../../../lib'
-import { ComponentSlotStylesInput, ICSSInJSStyle, FontIconSpec } from '../../../types'
-import { ResultOf } from '../../../../types'
+import { ComponentSlotStylesInput, ICSSInJSStyle } from '../../../types'
 import { IconProps } from '../../../../components/Icon/Icon'
 import { getStyle as getSvgStyle } from './svg'
 import { IconVariables, IconSizeModifier } from './iconVariables'
 
-const sizes: Record<SizeValue, number> = {
-  smallest: 7,
-  smaller: 10,
-  small: 12,
-  medium: 16,
-  large: 20,
-  larger: 32,
-  largest: 40,
-}
-
-const getDefaultFontIcon = (iconName: string) => {
-  return callable(fontAwesomeIcons(iconName).icon)()
-}
-
 const getPaddedStyle = (): ICSSInJSStyle => ({
   padding: pxToRem(4),
 })
@@ -34,35 +18,9 @@ const getBorderedStyles = (boxShadowColor: string): ICSSInJSStyle => {
   }
 }
 
-const getFontStyles = (
-  size: number,
-  iconName: string,
-  themeIcon?: ResultOf<FontIconSpec>,
-): ICSSInJSStyle => {
-  const { fontFamily, content } = themeIcon || getDefaultFontIcon(iconName)
-  const sizeInRems = pxToRem(size)
-
-  return {
-    fontFamily,
-    fontSize: sizeInRems,
-    lineHeight: 1,
-
-    display: 'inline-flex',
-    justifyContent: 'center',
-    alignItems: 'center',
-
-    width: sizeInRems,
-    height: sizeInRems,
-
-    '::before': {
-      content,
-    },
-  }
-}
-
-const getIconSize = (size: SizeValue, sizeModifier: IconSizeModifier): number => {
+const getIconSize = (size: SizeValue, sizeModifier: IconSizeModifier, v: IconVariables): string => {
   if (!sizeModifier) {
-    return sizes[size]
+    return v[`${size}Size`]
   }
 
   const modifiedSizes = {
@@ -72,7 +30,7 @@ const getIconSize = (size: SizeValue, sizeModifier: IconSizeModifier): number =>
     },
   }
 
-  return modifiedSizes[size] && modifiedSizes[size][sizeModifier]
+  return modifiedSizes[size] && pxToRem(modifiedSizes[size][sizeModifier])
 }
 
 const getIconColor = (variables, colors) => {
@@ -80,40 +38,24 @@ const getIconColor = (variables, colors) => {
 }
 
 const iconStyles: ComponentSlotStylesInput<IconProps, IconVariables> = {
-  root: ({
-    props: { disabled, name, size, bordered, circular, color, xSpacing, rotate },
-    variables: v,
-    theme,
-  }): ICSSInJSStyle => {
-    const colors = v.colorScheme[color]
-    const iconSpec = theme.icons[name]
-    const isFontBased = name && (!iconSpec || !iconSpec.isSvg)
+  root: ({ props: p, variables: v }): ICSSInJSStyle => {
+    const colors = v.colorScheme[p.color]
 
     return {
-      backgroundColor: v.backgroundColor,
-      boxSizing: isFontBased ? 'content-box' : 'border-box',
-
-      // overriding the base theme default transformation as in teams theme the svg/svgFlippingInRtl slots are used for this
-      ...(!isFontBased && {
-        transform: 'unset',
-      }),
-
-      ...(isFontBased && {
-        ...getFontStyles(getIconSize(size, v.sizeModifier), name),
-        fontWeight: 900, // required for the fontAwesome to render
-        color: getIconColor(v, colors),
-        transform: `rotate(${rotate}deg)`,
-        ...(disabled && {
-          color: v.disabledColor,
-        }),
-      }),
+      display: 'inline-block', // we overriding this for Base theme
 
       // overriding base theme border handling
-      ...((bordered || v.borderColor) &&
+      ...((p.bordered || v.borderColor) &&
         getBorderedStyles(v.borderColor || getIconColor(v, colors))),
     }
   },
 
+  svgRoot: ({ props: p, variables: v }): ICSSInJSStyle => {
+    return {
+      backgroundColor: v.backgroundColor,
+    }
+  },
+
   outlinePart: ({ props: p }): ICSSInJSStyle => {
     return {
       display: 'none',
@@ -134,7 +76,7 @@ const iconStyles: ComponentSlotStylesInput<IconProps, IconVariables> = {
 
   svg: ({ props: { size, color, disabled, rotate }, variables: v }): ICSSInJSStyle => {
     const colors = v.colorScheme[color]
-    const iconSizeInRems = pxToRem(getIconSize(size, v.sizeModifier))
+    const iconSizeInRems = getIconSize(size, v.sizeModifier, v)
 
     return {
       display: 'block',
diff --git a/packages/react/src/themes/teams/components/Icon/iconVariables.ts b/packages/react/src/themes/teams/components/Icon/iconVariables.ts
index 356c096559..0e3b3c464c 100644
--- a/packages/react/src/themes/teams/components/Icon/iconVariables.ts
+++ b/packages/react/src/themes/teams/components/Icon/iconVariables.ts
@@ -1,27 +1,21 @@
 import { pxToRem } from '../../../../lib'
 import { ColorSchemeMapping } from '../../../types'
+import { IconVariables as BaseIconVariables } from 'src/themes/base/components/Icon/iconVariables'
 
 export type IconSizeModifier = 'x' | 'xx'
 
-export interface IconVariables {
-  [key: string]: object | string | number | boolean | undefined
+export interface IconVariables extends BaseIconVariables {
   colorScheme?: ColorSchemeMapping
-  color?: string
-  backgroundColor?: string
-  borderColor?: string
   brandColor?: string
   secondaryColor: string
   redColor?: string
-  disabledColor: string
 
-  horizontalSpace: string
   sizeModifier?: IconSizeModifier
 }
 
-export default (siteVars): IconVariables => ({
+export default (siteVars): Partial<IconVariables> => ({
   colorScheme: siteVars.colorScheme,
   color: undefined,
-  backgroundColor: undefined,
   borderColor: undefined,
   brandColor: siteVars.brandColor,
   secondaryColor: siteVars.colors.white,
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 4a8fe726f5..f57afa0323 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
@@ -105,6 +105,7 @@ import send from './send'
 import settings from './settings'
 import callControlCloseTray from './callControlCloseTray'
 import star from './star'
+import stardustCircle from './stardustCircle'
 import sticker from './sticker'
 import strike from './strike'
 import table from './table'
@@ -126,6 +127,8 @@ import videoCameraEmphasis from './videoCameraEmphasis'
 import yammer from './yammer'
 
 export default {
+  'stardust-circle': stardustCircle,
+
   accept,
   add,
   'arrow-up': arrowUp,
diff --git a/packages/react/src/themes/teams/components/Icon/svg/icons/stardustCircle.tsx b/packages/react/src/themes/teams/components/Icon/svg/icons/stardustCircle.tsx
new file mode 100644
index 0000000000..650ea6ca25
--- /dev/null
+++ b/packages/react/src/themes/teams/components/Icon/svg/icons/stardustCircle.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import cx from 'classnames'
+import { TeamsSvgIconSpec } from '../types'
+import { teamsIconClassNames } from '../teamsIconClassNames'
+
+export default {
+  icon: ({ classes }) => (
+    <svg role="presentation" focusable="false" viewBox="8 8 16 16" className={classes.svg}>
+      <g>
+        <path d="M16.5 9C12.4 9 9 12.4 9 16.5s3.4 7.5 7.5 7.5 7.5-3.4 7.5-7.5S20.6 9 16.5 9zm0 14c-3.6 0-6.5-2.9-6.5-6.5s2.9-6.5 6.5-6.5 6.5 2.9 6.5 6.5-2.9 6.5-6.5 6.5z" />
+        <circle
+          className={cx(teamsIconClassNames.filled, classes.filledPart)}
+          cx="16"
+          cy="16"
+          r="8"
+        />
+      </g>
+    </svg>
+  ),
+  styles: {},
+} as TeamsSvgIconSpec
diff --git a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts
index 420f336df7..a87077dca6 100644
--- a/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts
+++ b/packages/react/src/themes/teams/components/RadioGroup/radioGroupItemStyles.ts
@@ -7,6 +7,7 @@ import { RadioGroupItemVariables } from './radioGroupItemVariables'
 import { pxToRem } from '../../../../lib'
 import Icon from '../../../../components/Icon/Icon'
 import getBorderFocusStyles from '../../getBorderFocusStyles'
+import getIconFillOrOutlineStyles from '../../getIconFillOrOutlineStyles'
 
 const restHoverFocusTextColor = textColor => ({
   color: textColor,
@@ -62,27 +63,22 @@ const radioStyles: ComponentSlotStylesInput<
 
   icon: ({ props: p, variables: v }): ICSSInJSStyle => ({
     // overrides from icon styles
-    backgroundColor: 'transparent',
     boxShadow: 'none',
-    borderStyle: 'solid',
-    borderWidth: `${pxToRem(1)}`,
-    borderColor: 'currentColor',
     margin: `0 ${pxToRem(12)} 0 0`,
-    height: `${pxToRem(12)}`,
-    width: `${pxToRem(12)}`,
+
+    ...getIconFillOrOutlineStyles({ outline: !p.checked }),
 
     ...(p.checked && {
-      backgroundColor: v.iconBackgroundColorChecked,
-      borderColor: v.iconBorderColorChecked,
+      color: v.iconBackgroundColorChecked,
     }),
 
     ...(p.disabled && {
-      borderColor: v.colorDisabled,
+      color: v.colorDisabled,
     }),
 
     ...(p.checked &&
       p.disabled && {
-        backgroundColor: v.colorDisabled,
+        color: v.colorDisabled,
       }),
   }),
 }
diff --git a/packages/react/src/themes/teams/index.ts b/packages/react/src/themes/teams/index.tsx
similarity index 82%
rename from packages/react/src/themes/teams/index.ts
rename to packages/react/src/themes/teams/index.tsx
index abbb8b7d00..15006c58fe 100644
--- a/packages/react/src/themes/teams/index.ts
+++ b/packages/react/src/themes/teams/index.tsx
@@ -1,4 +1,4 @@
-import { ThemeIconSpec, ThemeIcons, FontIconSpec, SvgIconSpec } from '../types'
+import { ThemeIconSpec, ThemeIcons, SvgIconSpec } from '../types'
 
 import mergeThemes from '../../lib/mergeThemes'
 import base from '../base'
@@ -10,7 +10,6 @@ import fontFaces from './fontFaces'
 import staticStyles from './staticStyles'
 
 import { default as svgIconsAndStyles } from './components/Icon/svg'
-import { default as fontIcons } from './components/Icon/font'
 
 import { TeamsSvgIconSpec, SvgIconSpecWithStyles } from './components/Icon/svg/types'
 
@@ -19,8 +18,6 @@ const declareSvg = (svgIcon: SvgIconSpec): ThemeIconSpec => ({
   icon: svgIcon,
 })
 
-const declareFontBased = (fontIcon: FontIconSpec): ThemeIconSpec => ({ icon: fontIcon })
-
 export const getIcon = (iconAndMaybeStyles): SvgIconSpec => {
   return (iconAndMaybeStyles as any).styles
     ? (iconAndMaybeStyles as SvgIconSpecWithStyles).icon
@@ -37,12 +34,9 @@ const themeIcons: ThemeIcons = Object.keys(svgIconsAndStyles as {
   return { ...accIcons, ...{ [iconName]: declareSvg(icon) } }
 }, {})
 
-Object.keys(fontIcons).forEach(iconName => {
-  themeIcons[iconName] = declareFontBased(fontIcons[iconName])
-})
-
 const icons: ThemeIcons = {
   ...themeIcons,
+  'stardust-circle': themeIcons['stardust-circle'],
   'stardust-close': themeIcons['close'],
   'stardust-arrow-up': themeIcons['triangle-up'],
   'stardust-arrow-down': themeIcons['triangle-down'],
diff --git a/packages/react/src/themes/types.ts b/packages/react/src/themes/types.ts
index ffc48a7c51..b43a15b889 100644
--- a/packages/react/src/themes/types.ts
+++ b/packages/react/src/themes/types.ts
@@ -549,6 +549,7 @@ export type ThemeIconSpec = {
 }
 
 export type RequiredIconNames =
+  | 'stardust-circle'
   | 'stardust-close'
   | 'stardust-arrow-end'
   | 'stardust-arrow-up'