From d368f8db27c24cb479b4f8845896a4c45454326c Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Mon, 24 Sep 2018 17:55:58 +0200
Subject: [PATCH 01/23] -added new theme -added switcher for example // TODO it
 is merging the both themes

---
 .../ComponentExample/ComponentExample.tsx     |   36 +-
 .../Button/Types/ButtonExample.shorthand.tsx  |   12 +-
 src/themes/default/componentStyles.ts         |    2 +
 src/themes/default/componentVariables.ts      |    2 +
 .../components/Button/buttonGroupStyles.ts    |   32 +
 .../default/components/Button/buttonStyles.ts |  205 +++
 .../components/Button/buttonVariables.ts      |   79 +
 .../default/components/Icon/font/index.ts     |   11 +
 .../components/Icon/fontAwesomeIconStyles.ts  | 1304 +++++++++++++++++
 .../default/components/Icon/iconStyles.ts     |  131 ++
 .../default/components/Icon/iconVariables.ts  |   21 +
 .../components/Icon/svg/icons/call.tsx        |   31 +
 .../Icon/svg/icons/callControlPresentNew.tsx  |   20 +
 .../icons/callControlStopPresentingNew.tsx    |   21 +
 .../components/Icon/svg/icons/callEnd.tsx     |   12 +
 .../Icon/svg/icons/callIncomingVideo.tsx      |   13 +
 .../Icon/svg/icons/callIncomingVideoOff.tsx   |   28 +
 .../Icon/svg/icons/callMicrophone.tsx         |   39 +
 .../Icon/svg/icons/callMicrophoneOff.tsx      |   30 +
 .../components/Icon/svg/icons/index.ts        |   27 +
 .../components/Icon/svg/icons/more.tsx        |   16 +
 .../components/Icon/svg/icons/teamCreate.tsx  |   22 +
 .../components/Icon/svg/icons/umbrella.tsx    |   15 +
 .../default/components/Icon/svg/index.ts      |   19 +
 .../default/components/Icon/svg/types.d.ts    |   10 +
 src/themes/default/fontFaces.ts               |   21 +
 src/themes/default/index.ts                   |   48 +
 src/themes/default/siteVariables.ts           |   93 ++
 src/themes/index.ts                           |    1 +
 29 files changed, 2293 insertions(+), 8 deletions(-)
 create mode 100644 src/themes/default/componentStyles.ts
 create mode 100644 src/themes/default/componentVariables.ts
 create mode 100644 src/themes/default/components/Button/buttonGroupStyles.ts
 create mode 100644 src/themes/default/components/Button/buttonStyles.ts
 create mode 100644 src/themes/default/components/Button/buttonVariables.ts
 create mode 100644 src/themes/default/components/Icon/font/index.ts
 create mode 100644 src/themes/default/components/Icon/fontAwesomeIconStyles.ts
 create mode 100644 src/themes/default/components/Icon/iconStyles.ts
 create mode 100644 src/themes/default/components/Icon/iconVariables.ts
 create mode 100644 src/themes/default/components/Icon/svg/icons/call.tsx
 create mode 100644 src/themes/default/components/Icon/svg/icons/callControlPresentNew.tsx
 create mode 100644 src/themes/default/components/Icon/svg/icons/callControlStopPresentingNew.tsx
 create mode 100644 src/themes/default/components/Icon/svg/icons/callEnd.tsx
 create mode 100644 src/themes/default/components/Icon/svg/icons/callIncomingVideo.tsx
 create mode 100644 src/themes/default/components/Icon/svg/icons/callIncomingVideoOff.tsx
 create mode 100644 src/themes/default/components/Icon/svg/icons/callMicrophone.tsx
 create mode 100644 src/themes/default/components/Icon/svg/icons/callMicrophoneOff.tsx
 create mode 100644 src/themes/default/components/Icon/svg/icons/index.ts
 create mode 100644 src/themes/default/components/Icon/svg/icons/more.tsx
 create mode 100644 src/themes/default/components/Icon/svg/icons/teamCreate.tsx
 create mode 100644 src/themes/default/components/Icon/svg/icons/umbrella.tsx
 create mode 100644 src/themes/default/components/Icon/svg/index.ts
 create mode 100644 src/themes/default/components/Icon/svg/types.d.ts
 create mode 100644 src/themes/default/fontFaces.ts
 create mode 100644 src/themes/default/index.ts
 create mode 100644 src/themes/default/siteVariables.ts

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index ec2ed1171c..f96297a3b5 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -1,11 +1,11 @@
 import * as _ from 'lodash'
 import PropTypes from 'prop-types'
 import * as React from 'react'
-import { withRouter, RouteComponentProps } from 'react-router'
+import { RouteComponentProps, withRouter } from 'react-router'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { html } from 'js-beautify'
 import * as copyToClipboard from 'copy-to-clipboard'
-import { Divider, Form, Grid, Menu, Segment, Visibility } from 'semantic-ui-react'
+import { Divider, Dropdown, Form, Grid, Menu, Segment, Visibility } from 'semantic-ui-react'
 import { Provider, themes } from '@stardust-ui/react'
 
 import {
@@ -23,6 +23,7 @@ import ComponentExampleTitle from './ComponentExampleTitle'
 import ContributionPrompt from '../ContributionPrompt'
 import getSourceCodeManager, { ISourceCodeManager, SourceCodeType } from './SourceCodeManager'
 import { IThemeInput, IThemePrepared } from 'types/theme'
+import Text from '../../../../../src/components/Text/Text'
 
 export interface IComponentExampleProps extends RouteComponentProps<any, any> {
   title: string
@@ -33,6 +34,7 @@ export interface IComponentExampleProps extends RouteComponentProps<any, any> {
 
 interface IComponentExampleState {
   knobs: Object
+  themeName: string
   theme: IThemeInput
   exampleElement?: JSX.Element
   handleMouseLeave?: () => void
@@ -71,6 +73,7 @@ class ComponentExample extends React.PureComponent<IComponentExampleProps, IComp
 
   public state: IComponentExampleState = {
     knobs: {},
+    themeName: 'teams',
     theme: themes.teams,
     sourceCode: '',
     markup: '',
@@ -349,6 +352,7 @@ class ComponentExample extends React.PureComponent<IComponentExampleProps, IComp
     const { showRtl, theme } = this.state
 
     const newTheme: IThemeInput = {
+      ...theme,
       componentVariables: theme.componentVariables,
       rtl: showRtl,
     }
@@ -527,17 +531,43 @@ class ComponentExample extends React.PureComponent<IComponentExampleProps, IComp
     )
   }
 
+  private handleThemeChange = (event: React.SyntheticEvent, data: any) => {
+    this.setState({ theme: themes[data.value], themeName: data.value }, () => {
+      this.renderSourceCode()
+      this.renderVariables()
+    })
+  }
+
   private renderVariables = () => {
-    const { showVariables } = this.state
+    const { showVariables, themeName } = this.state
     if (!showVariables) return undefined
 
     const displayName = this.getDisplayName()
 
+    const themeOptions = Object.keys(themes).map(key => ({
+      text: key,
+      value: key,
+    }))
+
     return (
       <div>
         <Divider inverted horizontal>
           <span style={{ opacity: 0.5 }}>Theme</span>
         </Divider>
+        <Form inverted widths="equal" style={{ padding: '1rem' }}>
+          <Text styles={{ color: 'white' }} important>
+            Theme
+          </Text>
+          <Dropdown
+            placeholder="Select Theme"
+            fluid
+            inverted
+            selection
+            defaultValue={themeName}
+            options={themeOptions}
+            onChange={this.handleThemeChange}
+          />
+        </Form>
         <Provider.Consumer
           render={({ siteVariables, componentVariables }: IThemePrepared) => {
             const variables = componentVariables[displayName]
diff --git a/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx b/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx
index 04e23fffb8..f26710779a 100644
--- a/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx
@@ -1,11 +1,13 @@
 import React from 'react'
-import { Button } from '@stardust-ui/react'
+import { Button, Provider, themes } from '@stardust-ui/react'
 
 const ButtonExample = () => (
-  <div>
-    <Button content="Click here" />
-    <Button content="See how this very long text shows up on the button" />
-  </div>
+  <Provider theme={themes.stardust}>
+    <>
+      <Button content="Click here" />
+      <Button content="See how this very long text shows up on the button" />
+    </>
+  </Provider>
 )
 
 export default ButtonExample
diff --git a/src/themes/default/componentStyles.ts b/src/themes/default/componentStyles.ts
new file mode 100644
index 0000000000..4f363a9b2b
--- /dev/null
+++ b/src/themes/default/componentStyles.ts
@@ -0,0 +1,2 @@
+export { default as Button } from './components/Button/buttonStyles'
+export { default as ButtonGroup } from './components/Button/buttonGroupStyles'
diff --git a/src/themes/default/componentVariables.ts b/src/themes/default/componentVariables.ts
new file mode 100644
index 0000000000..6a0a975d06
--- /dev/null
+++ b/src/themes/default/componentVariables.ts
@@ -0,0 +1,2 @@
+export { default as Button } from './components/Button/buttonVariables'
+export { default as ButtonGroup } from './components/Button/buttonVariables'
diff --git a/src/themes/default/components/Button/buttonGroupStyles.ts b/src/themes/default/components/Button/buttonGroupStyles.ts
new file mode 100644
index 0000000000..e0d790cb3b
--- /dev/null
+++ b/src/themes/default/components/Button/buttonGroupStyles.ts
@@ -0,0 +1,32 @@
+import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
+import { IButtonGroupProps } from '../../../../components/Button/ButtonGroup'
+
+const commonButtonsStyles = (circular: boolean) => ({
+  ...(!circular && {
+    margin: '0px',
+    borderRadius: '0px',
+  }),
+})
+
+const buttonGroupStyles: IComponentPartStylesInput<IButtonGroupProps, any> = {
+  root: (): ICSSInJSStyle => ({}),
+  middleButton: ({ props: p }) => ({
+    ...commonButtonsStyles(p.circular),
+  }),
+  firstButton: ({ props: p, variables: v }) => ({
+    ...commonButtonsStyles(p.circular),
+    ...(!p.circular && {
+      borderTopLeftRadius: v.borderRadius,
+      borderBottomLeftRadius: v.borderRadius,
+    }),
+  }),
+  lastButton: ({ props: p, variables: v }) => ({
+    ...commonButtonsStyles(p.circular),
+    ...(!p.circular && {
+      borderTopRightRadius: v.borderRadius,
+      borderBottomRightRadius: v.borderRadius,
+    }),
+  }),
+}
+
+export default buttonGroupStyles
diff --git a/src/themes/default/components/Button/buttonStyles.ts b/src/themes/default/components/Button/buttonStyles.ts
new file mode 100644
index 0000000000..9ba83dc444
--- /dev/null
+++ b/src/themes/default/components/Button/buttonStyles.ts
@@ -0,0 +1,205 @@
+import { pxToRem } from '../../../../lib'
+import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
+import { IButtonProps } from '../../../../components/Button/Button'
+import { truncateStyle } from '../../../../styles/customCSS'
+
+const buttonStyles: IComponentPartStylesInput<IButtonProps, any> = {
+  root: ({ props, variables }): ICSSInJSStyle => {
+    const { circular, disabled, fluid, type, text, iconOnly, isFromKeyboard } = props
+    const primary = type === 'primary'
+    const secondary = type === 'secondary'
+
+    const {
+      height,
+      minWidth,
+      maxWidth,
+      borderRadius,
+      color,
+      backgroundColor,
+      backgroundColorHover,
+      circularRadius,
+      paddingLeftRightValue,
+      typeDisabledButtonColor,
+      typeDisabledButtonBackgroundColor,
+      typePrimaryColor,
+      typePrimaryBackgroundColor,
+      typePrimaryBackgroundColorActive,
+      typePrimaryBackgroundColorHover,
+      typePrimaryBackgroundColorFocus,
+      typePrimaryBorderColor,
+      typePrimaryBorderColorFocus,
+      typePrimaryBorderColorInsetFocus,
+      typeSecondaryColor,
+      typeSecondaryBackgroundColor,
+      typeSecondaryBackgroundColorActive,
+      typeSecondaryBackgroundColorHover,
+      typeSecondaryBackgroundColorFocus,
+      typeSecondaryBorderColor,
+      typeSecondaryBorderColorActive,
+      typeSecondaryBorderColorHover,
+      typeSecondaryBorderColorFocus,
+      typeSecondaryBorderColorInsetFocus,
+      typeTextColorHover,
+      typeTextPrimaryColor,
+      typeTextPrimaryColorHover,
+      typeTextSecondaryColor,
+      typeTextSecondaryColorHover,
+    } = variables
+
+    return {
+      height,
+      minWidth,
+      maxWidth,
+      color,
+      backgroundColor,
+      borderRadius,
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'relative',
+      padding: `0 ${pxToRem(paddingLeftRightValue)}`,
+      margin: `0 ${pxToRem(8)} 0 0`,
+      verticalAlign: 'middle',
+      cursor: 'pointer',
+
+      ...(!text && {
+        borderWidth: `${secondary ? (circular ? 1 : 2) : 0}px`,
+        ':hover': {
+          backgroundColor: backgroundColorHover,
+        },
+      }),
+
+      ...(text && {
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        ':hover': {
+          color: typeTextColorHover,
+        },
+      }),
+
+      ...(primary &&
+        !text && {
+          color: typePrimaryColor,
+          backgroundColor: typePrimaryBackgroundColor,
+          border: `${pxToRem(1)} solid ${typePrimaryBorderColor}`,
+          ':active': {
+            backgroundColor: typePrimaryBackgroundColorActive,
+          },
+          ':hover': {
+            color: typePrimaryColor,
+            backgroundColor: typePrimaryBackgroundColorHover,
+          },
+        }),
+
+      ...(primary &&
+        !text &&
+        !circular && {
+          outline: 0,
+          ':focus': {
+            ...(isFromKeyboard && {
+              backgroundColor: typePrimaryBackgroundColorFocus,
+              borderColor: typePrimaryBorderColorFocus,
+              '::before': {
+                content: '""',
+                position: 'absolute',
+                top: '0',
+                left: '0',
+                right: '0',
+                bottom: '0',
+                border: `${pxToRem(1)} solid ${typePrimaryBorderColorInsetFocus}`,
+                borderRadius: `${pxToRem(2)}`,
+              },
+            }),
+          },
+        }),
+
+      ...(primary &&
+        text && {
+          color: typeTextPrimaryColor,
+          ':hover': {
+            color: typeTextPrimaryColorHover,
+          },
+        }),
+
+      ...(secondary &&
+        !text && {
+          color: typeSecondaryColor,
+          backgroundColor: typeSecondaryBackgroundColor,
+          borderColor: typeSecondaryBorderColor,
+          border: `${pxToRem(1)} solid ${typeSecondaryBorderColor}`,
+          ':active': {
+            backgroundColor: typeSecondaryBackgroundColorActive,
+            borderColor: typeSecondaryBorderColorActive,
+          },
+          ':hover': {
+            backgroundColor: typeSecondaryBackgroundColorHover,
+            borderColor: typeSecondaryBorderColorHover,
+          },
+        }),
+
+      ...(secondary &&
+        !text &&
+        !circular && {
+          outline: 0,
+          ':focus': {
+            ...(isFromKeyboard && {
+              backgroundColor: typeSecondaryBackgroundColorFocus,
+              borderColor: typeSecondaryBorderColorFocus,
+              '::before': {
+                content: '""',
+                position: 'absolute',
+                top: '0',
+                left: '0',
+                right: '0',
+                bottom: '0',
+                border: `${pxToRem(1)} solid ${typeSecondaryBorderColorInsetFocus}`,
+                borderRadius: `${pxToRem(2)}`,
+              },
+            }),
+          },
+        }),
+
+      ...(secondary &&
+        text && {
+          color: typeTextSecondaryColor,
+          ':hover': {
+            color: typeTextSecondaryColorHover,
+          },
+        }),
+
+      ...(circular && {
+        minWidth: height,
+        padding: 0,
+        borderRadius: circularRadius,
+      }),
+
+      ...(fluid && {
+        width: '100%',
+        maxWidth: '100%',
+      }),
+
+      ...(disabled && {
+        cursor: 'default',
+        color: typeDisabledButtonColor,
+        backgroundColor: typeDisabledButtonBackgroundColor,
+        borderColor: typeDisabledButtonBackgroundColor,
+        ':hover': {
+          backgroundColor: typeDisabledButtonBackgroundColor,
+          borderColor: typeDisabledButtonBackgroundColor,
+        },
+      }),
+
+      ...(iconOnly && {
+        minWidth: height,
+        padding: 0,
+      }),
+    }
+  },
+
+  content: ({ props }) => ({
+    overflow: 'hidden',
+    ...(typeof props.content === 'string' && truncateStyle),
+  }),
+}
+
+export default buttonStyles
diff --git a/src/themes/default/components/Button/buttonVariables.ts b/src/themes/default/components/Button/buttonVariables.ts
new file mode 100644
index 0000000000..1030d46202
--- /dev/null
+++ b/src/themes/default/components/Button/buttonVariables.ts
@@ -0,0 +1,79 @@
+import { pxToRem } from '../../../../lib'
+
+export interface IButtonVariables {
+  [key: string]: string | number
+
+  height: string
+  minWidth: string
+  maxWidth: string
+  borderRadius: string
+  color: string
+  backgroundColor: string
+  backgroundColorHover: string
+  circularRadius: string
+  paddingLeftRightValue: number
+  typePrimaryColor: string
+  typePrimaryBackgroundColor: string
+  typePrimaryBackgroundColorActive: string
+  typePrimaryBackgroundColorHover: string
+  typePrimaryBorderColor: string
+  typePrimaryBorderColorFocus: string
+  typePrimaryBorderColorInsetFocus: string
+  typeSecondaryColor: string
+  typeSecondaryBackgroundColor: string
+  typeSecondaryBackgroundColorActive: string
+  typeSecondaryBackgroundColorHover: string
+  typeSecondaryBackgroundColorFocus: string
+  typeSecondaryBorderColor: string
+  typeSecondaryBorderColorActive: string
+  typeSecondaryBorderColorHover: string
+  typeSecondaryBorderColorFocus: string
+  typeSecondaryBorderColorInsetFocus: string
+  typeDisabledButtonColor: string
+  typeDisabledButtonBackgroundColor: string
+  typeTextColorHover: string
+  typeTextPrimaryColor: string
+  typeTextPrimaryColorHover: string
+  typeTextSecondaryColor: string
+  typeTextSecondaryColorHover: string
+}
+
+export default (siteVars: any): IButtonVariables => {
+  return {
+    height: pxToRem(32),
+    minWidth: pxToRem(96),
+    maxWidth: pxToRem(280),
+    borderRadius: pxToRem(2),
+    color: siteVars.black,
+    backgroundColor: siteVars.gray08,
+    backgroundColorHover: siteVars.gray06,
+    circularRadius: pxToRem(999),
+    fontWeight: siteVars.fontWeightSemibold,
+    paddingLeftRightValue: 20,
+    typePrimaryColor: siteVars.white,
+    typePrimaryBackgroundColor: siteVars.brand,
+    typePrimaryBackgroundColorActive: siteVars.brand02,
+    typePrimaryBackgroundColorHover: siteVars.brand04,
+    typePrimaryBackgroundColorFocus: siteVars.brand04,
+    typePrimaryBorderColor: 'transparent',
+    typePrimaryBorderColorFocus: siteVars.black,
+    typePrimaryBorderColorInsetFocus: siteVars.white,
+    typeSecondaryColor: siteVars.black,
+    typeSecondaryBackgroundColor: siteVars.white,
+    typeSecondaryBackgroundColorActive: siteVars.gray08,
+    typeSecondaryBackgroundColorHover: siteVars.gray09,
+    typeSecondaryBackgroundColorFocus: siteVars.gray08,
+    typeSecondaryBorderColor: siteVars.gray08,
+    typeSecondaryBorderColorActive: siteVars.gray06,
+    typeSecondaryBorderColorHover: siteVars.gray06,
+    typeSecondaryBorderColorFocus: siteVars.black,
+    typeSecondaryBorderColorInsetFocus: siteVars.white,
+    typeDisabledButtonColor: siteVars.gray08,
+    typeDisabledButtonBackgroundColor: siteVars.gray09,
+    typeTextColorHover: siteVars.brand04,
+    typeTextPrimaryColor: siteVars.brand,
+    typeTextPrimaryColorHover: siteVars.brand04,
+    typeTextSecondaryColor: siteVars.gray03,
+    typeTextSecondaryColorHover: siteVars.brand04,
+  }
+}
diff --git a/src/themes/default/components/Icon/font/index.ts b/src/themes/default/components/Icon/font/index.ts
new file mode 100644
index 0000000000..5e19b8d16b
--- /dev/null
+++ b/src/themes/default/components/Icon/font/index.ts
@@ -0,0 +1,11 @@
+import { FontIconSpec } from 'theme'
+
+const fontAwesome = (iconCode: string): FontIconSpec => ({
+  fontFamily: 'Icons',
+  content: `'\\${iconCode}'`,
+})
+
+export default {
+  'call-home': fontAwesome('f015'),
+  'take-rest': fontAwesome('f0f4'),
+} as { [key: string]: FontIconSpec }
diff --git a/src/themes/default/components/Icon/fontAwesomeIconStyles.ts b/src/themes/default/components/Icon/fontAwesomeIconStyles.ts
new file mode 100644
index 0000000000..920f99b92d
--- /dev/null
+++ b/src/themes/default/components/Icon/fontAwesomeIconStyles.ts
@@ -0,0 +1,1304 @@
+const fontAwesomeIcons = new Map([
+  // Deprecated *In/Out Naming Conflict)
+  ['linkedin in', 'f0e1'],
+  ['zoom in', 'f00e'],
+  ['zoom out', 'f010'],
+  ['sign in', 'f2f6'],
+  ['in cart', 'f218'],
+  ['log out', 'f2f5'],
+  ['sign out', 'f2f5'],
+
+  // Icons
+  ['500px', 'f26e'],
+  ['accessible icon', 'f368'],
+  ['accusoft', 'f369'],
+  ['address book', 'f2b9'],
+  ['address card', 'f2bb'],
+  ['adjust', 'f042'],
+  ['adn', 'f170'],
+  ['adversal', 'f36a'],
+  ['affiliatetheme', 'f36b'],
+  ['algolia', 'f36c'],
+  ['align center', 'f037'],
+  ['align justify', 'f039'],
+  ['align left', 'f036'],
+  ['align right', 'f038'],
+  ['amazon', 'f270'],
+  ['amazon pay', 'f42c'],
+  ['ambulance', 'f0f9'],
+  ['american sign language interpreting', 'f2a3'],
+  ['amilia', 'f36d'],
+  ['anchor', 'f13d'],
+  ['android', 'f17b'],
+  ['angellist', 'f209'],
+  ['angle double down', 'f103'],
+  ['angle double left', 'f100'],
+  ['angle double right', 'f101'],
+  ['angle double up', 'f102'],
+  ['angle down', 'f107'],
+  ['angle left', 'f104'],
+  ['angle right', 'f105'],
+  ['angle up', 'f106'],
+  ['angrycreative', 'f36e'],
+  ['angular', 'f420'],
+  ['app store', 'f36f'],
+  ['app store ios', 'f370'],
+  ['apper', 'f371'],
+  ['apple', 'f179'],
+  ['apple pay', 'f415'],
+  ['archive', 'f187'],
+  ['arrow alternate circle down', 'f358'],
+  ['arrow alternate circle left', 'f359'],
+  ['arrow alternate circle right', 'f35a'],
+  ['arrow alternate circle up', 'f35b'],
+  ['arrow circle down', 'f0ab'],
+  ['arrow circle left', 'f0a8'],
+  ['arrow circle right', 'f0a9'],
+  ['arrow circle up', 'f0aa'],
+  ['arrow down', 'f063'],
+  ['arrow left', 'f060'],
+  ['arrow right', 'f061'],
+  ['arrow up', 'f062'],
+  ['arrows alternate', 'f0b2'],
+  ['arrows alternate horizontal', 'f337'],
+  ['arrows alternate vertical', 'f338'],
+  ['assistive listening systems', 'f2a2'],
+  ['asterisk', 'f069'],
+  ['asymmetrik', 'f372'],
+  ['at', 'f1fa'],
+  ['audible', 'f373'],
+  ['audio description', 'f29e'],
+  ['autoprefixer', 'f41c'],
+  ['avianex', 'f374'],
+  ['aviato', 'f421'],
+  ['aws', 'f375'],
+  ['backward', 'f04a'],
+  ['balance scale', 'f24e'],
+  ['ban', 'f05e'],
+  ['band aid', 'f462'],
+  ['bandcamp', 'f2d5'],
+  ['barcode', 'f02a'],
+  ['bars', 'f0c9'],
+  ['baseball ball', 'f433'],
+  ['basketball ball', 'f434'],
+  ['bath', 'f2cd'],
+  ['battery empty', 'f244'],
+  ['battery full', 'f240'],
+  ['battery half', 'f242'],
+  ['battery quarter', 'f243'],
+  ['battery three quarters', 'f241'],
+  ['bed', 'f236'],
+  ['beer', 'f0fc'],
+  ['behance', 'f1b4'],
+  ['behance square', 'f1b5'],
+  ['bell', 'f0f3'],
+  ['bell slash', 'f1f6'],
+  ['bicycle', 'f206'],
+  ['bimobject', 'f378'],
+  ['binoculars', 'f1e5'],
+  ['birthday cake', 'f1fd'],
+  ['bitbucket', 'f171'],
+  ['bitcoin', 'f379'],
+  ['bity', 'f37a'],
+  ['black tie', 'f27e'],
+  ['blackberry', 'f37b'],
+  ['blind', 'f29d'],
+  ['blogger', 'f37c'],
+  ['blogger b', 'f37d'],
+  ['bluetooth', 'f293'],
+  ['bluetooth b', 'f294'],
+  ['bold', 'f032'],
+  ['bolt', 'f0e7'],
+  ['bomb', 'f1e2'],
+  ['book', 'f02d'],
+  ['bookmark', 'f02e'],
+  ['bowling ball', 'f436'],
+  ['box', 'f466'],
+  ['boxes', 'f468'],
+  ['braille', 'f2a1'],
+  ['briefcase', 'f0b1'],
+  ['btc', 'f15a'],
+  ['bug', 'f188'],
+  ['building', 'f1ad'],
+  ['bullhorn', 'f0a1'],
+  ['bullseye', 'f140'],
+  ['buromobelexperte', 'f37f'],
+  ['bus', 'f207'],
+  ['buysellads', 'f20d'],
+  ['calculator', 'f1ec'],
+  ['calendar', 'f133'],
+  ['calendar alternate', 'f073'],
+  ['calendar check', 'f274'],
+  ['calendar minus', 'f272'],
+  ['calendar plus', 'f271'],
+  ['calendar times', 'f273'],
+  ['camera', 'f030'],
+  ['camera retro', 'f083'],
+  ['car', 'f1b9'],
+  ['caret down', 'f0d7'],
+  ['caret left', 'f0d9'],
+  ['caret right', 'f0da'],
+  ['caret square down', 'f150'],
+  ['caret square left', 'f191'],
+  ['caret square right', 'f152'],
+  ['caret square up', 'f151'],
+  ['caret up', 'f0d8'],
+  ['cart arrow down', 'f218'],
+  ['cart plus', 'f217'],
+  ['cc amazon pay', 'f42d'],
+  ['cc amex', 'f1f3'],
+  ['cc apple pay', 'f416'],
+  ['cc diners club', 'f24c'],
+  ['cc discover', 'f1f2'],
+  ['cc jcb', 'f24b'],
+  ['cc mastercard', 'f1f1'],
+  ['cc paypal', 'f1f4'],
+  ['cc stripe', 'f1f5'],
+  ['cc visa', 'f1f0'],
+  ['centercode', 'f380'],
+  ['certificate', 'f0a3'],
+  ['chart area', 'f1fe'],
+  ['chart bar', 'f080'],
+  ['chart line', 'f201'],
+  ['chart pie', 'f200'],
+  ['check', 'f00c'],
+  ['check circle', 'f058'],
+  ['check square', 'f14a'],
+  ['chess', 'f439'],
+  ['chess bishop', 'f43a'],
+  ['chess board', 'f43c'],
+  ['chess king', 'f43f'],
+  ['chess knight', 'f441'],
+  ['chess pawn', 'f443'],
+  ['chess queen', 'f445'],
+  ['chess rook', 'f447'],
+  ['chevron circle down', 'f13a'],
+  ['chevron circle left', 'f137'],
+  ['chevron circle right', 'f138'],
+  ['chevron circle up', 'f139'],
+  ['chevron down', 'f078'],
+  ['chevron left', 'f053'],
+  ['chevron right', 'f054'],
+  ['chevron up', 'f077'],
+  ['child', 'f1ae'],
+  ['chrome', 'f268'],
+  ['circle', 'f111'],
+  ['circle notch', 'f1ce'],
+  ['clipboard', 'f328'],
+  ['clipboard check', 'f46c'],
+  ['clipboard list', 'f46d'],
+  ['clock', 'f017'],
+  ['clone', 'f24d'],
+  ['closed captioning', 'f20a'],
+  ['cloud', 'f0c2'],
+  ['cloudscale', 'f383'],
+  ['cloudsmith', 'f384'],
+  ['cloudversify', 'f385'],
+  ['code', 'f121'],
+  ['code branch', 'f126'],
+  ['codepen', 'f1cb'],
+  ['codiepie', 'f284'],
+  ['coffee', 'f0f4'],
+  ['cog', 'f013'],
+  ['cogs', 'f085'],
+  ['columns', 'f0db'],
+  ['comment', 'f075'],
+  ['comment alternate', 'f27a'],
+  ['comments', 'f086'],
+  ['compass', 'f14e'],
+  ['compress', 'f066'],
+  ['connectdevelop', 'f20e'],
+  ['contao', 'f26d'],
+  ['copy', 'f0c5'],
+  ['copyright', 'f1f9'],
+  ['cpanel', 'f388'],
+  ['creative commons', 'f25e'],
+  ['credit card', 'f09d'],
+  ['crop', 'f125'],
+  ['crosshairs', 'f05b'],
+  ['css3', 'f13c'],
+  ['css3 alternate', 'f38b'],
+  ['cube', 'f1b2'],
+  ['cubes', 'f1b3'],
+  ['cut', 'f0c4'],
+  ['cuttlefish', 'f38c'],
+  ['d and d', 'f38d'],
+  ['dashcube', 'f210'],
+  ['database', 'f1c0'],
+  ['deaf', 'f2a4'],
+  ['delicious', 'f1a5'],
+  ['deploydog', 'f38e'],
+  ['deskpro', 'f38f'],
+  ['desktop', 'f108'],
+  ['deviantart', 'f1bd'],
+  ['digg', 'f1a6'],
+  ['digital ocean', 'f391'],
+  ['discord', 'f392'],
+  ['discourse', 'f393'],
+  ['dna', 'f471'],
+  ['dochub', 'f394'],
+  ['docker', 'f395'],
+  ['dollar sign', 'f155'],
+  ['dolly', 'f472'],
+  ['dolly flatbed', 'f474'],
+  ['dot circle', 'f192'],
+  ['download', 'f019'],
+  ['draft2digital', 'f396'],
+  ['dribbble', 'f17d'],
+  ['dribbble square', 'f397'],
+  ['dropbox', 'f16b'],
+  ['drupal', 'f1a9'],
+  ['dyalog', 'f399'],
+  ['earlybirds', 'f39a'],
+  ['edge', 'f282'],
+  ['edit', 'f044'],
+  ['eject', 'f052'],
+  ['elementor', 'f430'],
+  ['ellipsis horizontal', 'f141'],
+  ['ellipsis vertical', 'f142'],
+  ['ember', 'f423'],
+  ['empire', 'f1d1'],
+  ['envelope', 'f0e0'],
+  ['envelope open', 'f2b6'],
+  ['envelope square', 'f199'],
+  ['envira', 'f299'],
+  ['eraser', 'f12d'],
+  ['erlang', 'f39d'],
+  ['ethereum', 'f42e'],
+  ['etsy', 'f2d7'],
+  ['euro sign', 'f153'],
+  ['exchange alternate', 'f362'],
+  ['exclamation', 'f12a'],
+  ['exclamation circle', 'f06a'],
+  ['exclamation triangle', 'f071'],
+  ['expand', 'f065'],
+  ['expand arrows alternate', 'f31e'],
+  ['expeditedssl', 'f23e'],
+  ['external alternate', 'f35d'],
+  ['external square alternate', 'f360'],
+  ['eye', 'f06e'],
+  ['eye dropper', 'f1fb'],
+  ['eye slash', 'f070'],
+  ['facebook', 'f09a'],
+  ['facebook f', 'f39e'],
+  ['facebook messenger', 'f39f'],
+  ['facebook square', 'f082'],
+  ['fast backward', 'f049'],
+  ['fast forward', 'f050'],
+  ['fax', 'f1ac'],
+  ['female', 'f182'],
+  ['fighter jet', 'f0fb'],
+  ['file', 'f15b'],
+  ['file alternate', 'f15c'],
+  ['file archive', 'f1c6'],
+  ['file audio', 'f1c7'],
+  ['file code', 'f1c9'],
+  ['file excel', 'f1c3'],
+  ['file image', 'f1c5'],
+  ['file pdf', 'f1c1'],
+  ['file powerpoint', 'f1c4'],
+  ['file video', 'f1c8'],
+  ['file word', 'f1c2'],
+  ['film', 'f008'],
+  ['filter', 'f0b0'],
+  ['fire', 'f06d'],
+  ['fire extinguisher', 'f134'],
+  ['firefox', 'f269'],
+  ['first aid', 'f479'],
+  ['first order', 'f2b0'],
+  ['firstdraft', 'f3a1'],
+  ['flag', 'f024'],
+  ['flag checkered', 'f11e'],
+  ['flask', 'f0c3'],
+  ['flickr', 'f16e'],
+  ['flipboard', 'f44d'],
+  ['fly', 'f417'],
+  ['folder', 'f07b'],
+  ['folder open', 'f07c'],
+  ['font', 'f031'],
+  ['font awesome', 'f2b4'],
+  ['font awesome alternate', 'f35c'],
+  ['font awesome flag', 'f425'],
+  ['fonticons', 'f280'],
+  ['fonticons fi', 'f3a2'],
+  ['football ball', 'f44e'],
+  ['fort awesome', 'f286'],
+  ['fort awesome alternate', 'f3a3'],
+  ['forumbee', 'f211'],
+  ['forward', 'f04e'],
+  ['foursquare', 'f180'],
+  ['free code camp', 'f2c5'],
+  ['freebsd', 'f3a4'],
+  ['frown', 'f119'],
+  ['futbol', 'f1e3'],
+  ['gamepad', 'f11b'],
+  ['gavel', 'f0e3'],
+  ['gem', 'f3a5'],
+  ['genderless', 'f22d'],
+  ['get pocket', 'f265'],
+  ['gg', 'f260'],
+  ['gg circle', 'f261'],
+  ['gift', 'f06b'],
+  ['git', 'f1d3'],
+  ['git square', 'f1d2'],
+  ['github', 'f09b'],
+  ['github alternate', 'f113'],
+  ['github square', 'f092'],
+  ['gitkraken', 'f3a6'],
+  ['gitlab', 'f296'],
+  ['gitter', 'f426'],
+  ['glass martini', 'f000'],
+  ['glide', 'f2a5'],
+  ['glide g', 'f2a6'],
+  ['globe', 'f0ac'],
+  ['gofore', 'f3a7'],
+  ['golf ball', 'f450'],
+  ['goodreads', 'f3a8'],
+  ['goodreads g', 'f3a9'],
+  ['google', 'f1a0'],
+  ['google drive', 'f3aa'],
+  ['google play', 'f3ab'],
+  ['google plus', 'f2b3'],
+  ['google plus g', 'f0d5'],
+  ['google plus square', 'f0d4'],
+  ['google wallet', 'f1ee'],
+  ['graduation cap', 'f19d'],
+  ['gratipay', 'f184'],
+  ['grav', 'f2d6'],
+  ['gripfire', 'f3ac'],
+  ['grunt', 'f3ad'],
+  ['gulp', 'f3ae'],
+  ['h square', 'f0fd'],
+  ['hacker news', 'f1d4'],
+  ['hacker news square', 'f3af'],
+  ['hand lizard', 'f258'],
+  ['hand paper', 'f256'],
+  ['hand peace', 'f25b'],
+  ['hand point down', 'f0a7'],
+  ['hand point left', 'f0a5'],
+  ['hand point right', 'f0a4'],
+  ['hand point up', 'f0a6'],
+  ['hand pointer', 'f25a'],
+  ['hand rock', 'f255'],
+  ['hand scissors', 'f257'],
+  ['hand spock', 'f259'],
+  ['handshake', 'f2b5'],
+  ['hashtag', 'f292'],
+  ['hdd', 'f0a0'],
+  ['heading', 'f1dc'],
+  ['headphones', 'f025'],
+  ['heart', 'f004'],
+  ['heartbeat', 'f21e'],
+  ['hips', 'f452'],
+  ['hire a helper', 'f3b0'],
+  ['history', 'f1da'],
+  ['hockey puck', 'f453'],
+  ['home', 'f015'],
+  ['hooli', 'f427'],
+  ['hospital', 'f0f8'],
+  ['hospital symbol', 'f47e'],
+  ['hotjar', 'f3b1'],
+  ['hourglass', 'f254'],
+  ['hourglass end', 'f253'],
+  ['hourglass half', 'f252'],
+  ['hourglass start', 'f251'],
+  ['houzz', 'f27c'],
+  ['html5', 'f13b'],
+  ['hubspot', 'f3b2'],
+  ['i cursor', 'f246'],
+  ['id badge', 'f2c1'],
+  ['id card', 'f2c2'],
+  ['image', 'f03e'],
+  ['images', 'f302'],
+  ['imdb', 'f2d8'],
+  ['inbox', 'f01c'],
+  ['indent', 'f03c'],
+  ['industry', 'f275'],
+  ['info', 'f129'],
+  ['info circle', 'f05a'],
+  ['instagram', 'f16d'],
+  ['internet explorer', 'f26b'],
+  ['ioxhost', 'f208'],
+  ['italic', 'f033'],
+  ['itunes', 'f3b4'],
+  ['itunes note', 'f3b5'],
+  ['jenkins', 'f3b6'],
+  ['joget', 'f3b7'],
+  ['joomla', 'f1aa'],
+  ['js', 'f3b8'],
+  ['js square', 'f3b9'],
+  ['jsfiddle', 'f1cc'],
+  ['key', 'f084'],
+  ['keyboard', 'f11c'],
+  ['keycdn', 'f3ba'],
+  ['kickstarter', 'f3bb'],
+  ['kickstarter k', 'f3bc'],
+  ['korvue', 'f42f'],
+  ['language', 'f1ab'],
+  ['laptop', 'f109'],
+  ['laravel', 'f3bd'],
+  ['lastfm', 'f202'],
+  ['lastfm square', 'f203'],
+  ['leaf', 'f06c'],
+  ['leanpub', 'f212'],
+  ['lemon', 'f094'],
+  ['less', 'f41d'],
+  ['level down alternate', 'f3be'],
+  ['level up alternate', 'f3bf'],
+  ['life ring', 'f1cd'],
+  ['lightbulb', 'f0eb'],
+  ['linechat', 'f3c0'],
+  ['linkify', 'f0c1'],
+  ['linkedin', 'f08c'],
+  ['linkedin alt', 'f0e1'],
+  ['linode', 'f2b8'],
+  ['linux', 'f17c'],
+  ['lira sign', 'f195'],
+  ['list', 'f03a'],
+  ['list alternate', 'f022'],
+  ['list ol', 'f0cb'],
+  ['list ul', 'f0ca'],
+  ['location arrow', 'f124'],
+  ['lock', 'f023'],
+  ['lock open', 'f3c1'],
+  ['long arrow alternate down', 'f309'],
+  ['long arrow alternate left', 'f30a'],
+  ['long arrow alternate right', 'f30b'],
+  ['long arrow alternate up', 'f30c'],
+  ['low vision', 'f2a8'],
+  ['lyft', 'f3c3'],
+  ['magento', 'f3c4'],
+  ['magic', 'f0d0'],
+  ['magnet', 'f076'],
+  ['male', 'f183'],
+  ['map', 'f279'],
+  ['map marker', 'f041'],
+  ['map marker alternate', 'f3c5'],
+  ['map pin', 'f276'],
+  ['map signs', 'f277'],
+  ['mars', 'f222'],
+  ['mars double', 'f227'],
+  ['mars stroke', 'f229'],
+  ['mars stroke horizontal', 'f22b'],
+  ['mars stroke vertical', 'f22a'],
+  ['maxcdn', 'f136'],
+  ['medapps', 'f3c6'],
+  ['medium', 'f23a'],
+  ['medium m', 'f3c7'],
+  ['medkit', 'f0fa'],
+  ['medrt', 'f3c8'],
+  ['meetup', 'f2e0'],
+  ['meh', 'f11a'],
+  ['mercury', 'f223'],
+  ['microchip', 'f2db'],
+  ['microphone', 'f130'],
+  ['microphone slash', 'f131'],
+  ['microsoft', 'f3ca'],
+  ['minus', 'f068'],
+  ['minus circle', 'f056'],
+  ['minus square', 'f146'],
+  ['mix', 'f3cb'],
+  ['mixcloud', 'f289'],
+  ['mizuni', 'f3cc'],
+  ['mobile', 'f10b'],
+  ['mobile alternate', 'f3cd'],
+  ['modx', 'f285'],
+  ['monero', 'f3d0'],
+  ['money bill alternate', 'f3d1'],
+  ['moon', 'f186'],
+  ['motorcycle', 'f21c'],
+  ['mouse pointer', 'f245'],
+  ['music', 'f001'],
+  ['napster', 'f3d2'],
+  ['neuter', 'f22c'],
+  ['newspaper', 'f1ea'],
+  ['nintendo switch', 'f418'],
+  ['node', 'f419'],
+  ['node js', 'f3d3'],
+  ['npm', 'f3d4'],
+  ['ns8', 'f3d5'],
+  ['nutritionix', 'f3d6'],
+  ['object group', 'f247'],
+  ['object ungroup', 'f248'],
+  ['odnoklassniki', 'f263'],
+  ['odnoklassniki square', 'f264'],
+  ['opencart', 'f23d'],
+  ['openid', 'f19b'],
+  ['opera', 'f26a'],
+  ['optin monster', 'f23c'],
+  ['osi', 'f41a'],
+  ['outdent', 'f03b'],
+  ['page4', 'f3d7'],
+  ['pagelines', 'f18c'],
+  ['paint brush', 'f1fc'],
+  ['palfed', 'f3d8'],
+  ['pallet', 'f482'],
+  ['paper plane', 'f1d8'],
+  ['paperclip', 'f0c6'],
+  ['paragraph', 'f1dd'],
+  ['paste', 'f0ea'],
+  ['patreon', 'f3d9'],
+  ['pause', 'f04c'],
+  ['pause circle', 'f28b'],
+  ['paw', 'f1b0'],
+  ['paypal', 'f1ed'],
+  ['pen square', 'f14b'],
+  ['pencil alternate', 'f303'],
+  ['percent', 'f295'],
+  ['periscope', 'f3da'],
+  ['phabricator', 'f3db'],
+  ['phoenix framework', 'f3dc'],
+  ['phone', 'f095'],
+  ['phone square', 'f098'],
+  ['phone volume', 'f2a0'],
+  ['php', 'f457'],
+  ['pied piper', 'f2ae'],
+  ['pied piper alternate', 'f1a8'],
+  ['pied piper pp', 'f1a7'],
+  ['pills', 'f484'],
+  ['pinterest', 'f0d2'],
+  ['pinterest p', 'f231'],
+  ['pinterest square', 'f0d3'],
+  ['plane', 'f072'],
+  ['play', 'f04b'],
+  ['play circle', 'f144'],
+  ['playstation', 'f3df'],
+  ['plug', 'f1e6'],
+  ['plus', 'f067'],
+  ['plus circle', 'f055'],
+  ['plus square', 'f0fe'],
+  ['podcast', 'f2ce'],
+  ['pound sign', 'f154'],
+  ['power off', 'f011'],
+  ['print', 'f02f'],
+  ['product hunt', 'f288'],
+  ['pushed', 'f3e1'],
+  ['puzzle piece', 'f12e'],
+  ['python', 'f3e2'],
+  ['qq', 'f1d6'],
+  ['qrcode', 'f029'],
+  ['question', 'f128'],
+  ['question circle', 'f059'],
+  ['quidditch', 'f458'],
+  ['quinscape', 'f459'],
+  ['quora', 'f2c4'],
+  ['quote left', 'f10d'],
+  ['quote right', 'f10e'],
+  ['random', 'f074'],
+  ['ravelry', 'f2d9'],
+  ['react', 'f41b'],
+  ['rebel', 'f1d0'],
+  ['recycle', 'f1b8'],
+  ['redriver', 'f3e3'],
+  ['reddit', 'f1a1'],
+  ['reddit alien', 'f281'],
+  ['reddit square', 'f1a2'],
+  ['redo', 'f01e'],
+  ['redo alternate', 'f2f9'],
+  ['registered', 'f25d'],
+  ['rendact', 'f3e4'],
+  ['renren', 'f18b'],
+  ['reply', 'f3e5'],
+  ['reply all', 'f122'],
+  ['replyd', 'f3e6'],
+  ['resolving', 'f3e7'],
+  ['retweet', 'f079'],
+  ['road', 'f018'],
+  ['rocket', 'f135'],
+  ['rocketchat', 'f3e8'],
+  ['rockrms', 'f3e9'],
+  ['rss', 'f09e'],
+  ['rss square', 'f143'],
+  ['ruble sign', 'f158'],
+  ['rupee sign', 'f156'],
+  ['safari', 'f267'],
+  ['sass', 'f41e'],
+  ['save', 'f0c7'],
+  ['schlix', 'f3ea'],
+  ['scribd', 'f28a'],
+  ['search', 'f002'],
+  ['search minus', 'f010'],
+  ['search plus', 'f00e'],
+  ['searchengin', 'f3eb'],
+  ['sellcast', 'f2da'],
+  ['sellsy', 'f213'],
+  ['server', 'f233'],
+  ['servicestack', 'f3ec'],
+  ['share', 'f064'],
+  ['share alternate', 'f1e0'],
+  ['share alternate square', 'f1e1'],
+  ['share square', 'f14d'],
+  ['shekel sign', 'f20b'],
+  ['shield alternate', 'f3ed'],
+  ['ship', 'f21a'],
+  ['shipping fast', 'f48b'],
+  ['shirtsinbulk', 'f214'],
+  ['shopping bag', 'f290'],
+  ['shopping basket', 'f291'],
+  ['shopping cart', 'f07a'],
+  ['shower', 'f2cc'],
+  ['sign language', 'f2a7'],
+  ['signal', 'f012'],
+  ['simplybuilt', 'f215'],
+  ['sistrix', 'f3ee'],
+  ['sitemap', 'f0e8'],
+  ['skyatlas', 'f216'],
+  ['skype', 'f17e'],
+  ['slack', 'f198'],
+  ['slack hash', 'f3ef'],
+  ['sliders horizontal', 'f1de'],
+  ['slideshare', 'f1e7'],
+  ['smile', 'f118'],
+  ['snapchat', 'f2ab'],
+  ['snapchat ghost', 'f2ac'],
+  ['snapchat square', 'f2ad'],
+  ['snowflake', 'f2dc'],
+  ['sort', 'f0dc'],
+  ['sort alphabet down', 'f15d'],
+  ['sort alphabet up', 'f15e'],
+  ['sort amount down', 'f160'],
+  ['sort amount up', 'f161'],
+  ['sort down', 'f0dd'],
+  ['sort numeric down', 'f162'],
+  ['sort numeric up', 'f163'],
+  ['sort up', 'f0de'],
+  ['soundcloud', 'f1be'],
+  ['space shuttle', 'f197'],
+  ['speakap', 'f3f3'],
+  ['spinner', 'f110'],
+  ['spotify', 'f1bc'],
+  ['square', 'f0c8'],
+  ['square full', 'f45c'],
+  ['stack exchange', 'f18d'],
+  ['stack overflow', 'f16c'],
+  ['star', 'f005'],
+  ['star half', 'f089'],
+  ['staylinked', 'f3f5'],
+  ['steam', 'f1b6'],
+  ['steam square', 'f1b7'],
+  ['steam symbol', 'f3f6'],
+  ['step backward', 'f048'],
+  ['step forward', 'f051'],
+  ['stethoscope', 'f0f1'],
+  ['sticker mule', 'f3f7'],
+  ['sticky note', 'f249'],
+  ['stop', 'f04d'],
+  ['stop circle', 'f28d'],
+  ['stopwatch', 'f2f2'],
+  ['strava', 'f428'],
+  ['street view', 'f21d'],
+  ['strikethrough', 'f0cc'],
+  ['stripe', 'f429'],
+  ['stripe s', 'f42a'],
+  ['studiovinari', 'f3f8'],
+  ['stumbleupon', 'f1a4'],
+  ['stumbleupon circle', 'f1a3'],
+  ['subscript', 'f12c'],
+  ['subway', 'f239'],
+  ['suitcase', 'f0f2'],
+  ['sun', 'f185'],
+  ['superpowers', 'f2dd'],
+  ['superscript', 'f12b'],
+  ['supple', 'f3f9'],
+  ['sync', 'f021'],
+  ['sync alternate', 'f2f1'],
+  ['syringe', 'f48e'],
+  ['table', 'f0ce'],
+  ['table tennis', 'f45d'],
+  ['tablet', 'f10a'],
+  ['tablet alternate', 'f3fa'],
+  ['tachometer alternate', 'f3fd'],
+  ['tag', 'f02b'],
+  ['tags', 'f02c'],
+  ['tasks', 'f0ae'],
+  ['taxi', 'f1ba'],
+  ['telegram', 'f2c6'],
+  ['telegram plane', 'f3fe'],
+  ['tencent weibo', 'f1d5'],
+  ['terminal', 'f120'],
+  ['text height', 'f034'],
+  ['text width', 'f035'],
+  ['th', 'f00a'],
+  ['th large', 'f009'],
+  ['th list', 'f00b'],
+  ['themeisle', 'f2b2'],
+  ['thermometer', 'f491'],
+  ['thermometer empty', 'f2cb'],
+  ['thermometer full', 'f2c7'],
+  ['thermometer half', 'f2c9'],
+  ['thermometer quarter', 'f2ca'],
+  ['thermometer three quarters', 'f2c8'],
+  ['thumbs down', 'f165'],
+  ['thumbs up', 'f164'],
+  ['thumbtack', 'f08d'],
+  ['ticket alternate', 'f3ff'],
+  ['times', 'f00d'],
+  ['times circle', 'f057'],
+  ['tint', 'f043'],
+  ['toggle off', 'f204'],
+  ['toggle on', 'f205'],
+  ['trademark', 'f25c'],
+  ['train', 'f238'],
+  ['transgender', 'f224'],
+  ['transgender alternate', 'f225'],
+  ['trash', 'f1f8'],
+  ['trash alternate', 'f2ed'],
+  ['tree', 'f1bb'],
+  ['trello', 'f181'],
+  ['tripadvisor', 'f262'],
+  ['trophy', 'f091'],
+  ['truck', 'f0d1'],
+  ['tty', 'f1e4'],
+  ['tumblr', 'f173'],
+  ['tumblr square', 'f174'],
+  ['tv', 'f26c'],
+  ['twitch', 'f1e8'],
+  ['twitter', 'f099'],
+  ['twitter square', 'f081'],
+  ['typo3', 'f42b'],
+  ['uber', 'f402'],
+  ['uikit', 'f403'],
+  ['umbrella', 'f0e9'],
+  ['underline', 'f0cd'],
+  ['undo', 'f0e2'],
+  ['undo alternate', 'f2ea'],
+  ['uniregistry', 'f404'],
+  ['universal access', 'f29a'],
+  ['university', 'f19c'],
+  ['unlink', 'f127'],
+  ['unlock', 'f09c'],
+  ['unlock alternate', 'f13e'],
+  ['untappd', 'f405'],
+  ['upload', 'f093'],
+  ['usb', 'f287'],
+  ['user', 'f007'],
+  ['user circle', 'f2bd'],
+  ['user md', 'f0f0'],
+  ['user plus', 'f234'],
+  ['user secret', 'f21b'],
+  ['user times', 'f235'],
+  ['users', 'f0c0'],
+  ['ussunnah', 'f407'],
+  ['utensil spoon', 'f2e5'],
+  ['utensils', 'f2e7'],
+  ['vaadin', 'f408'],
+  ['venus', 'f221'],
+  ['venus double', 'f226'],
+  ['venus mars', 'f228'],
+  ['viacoin', 'f237'],
+  ['viadeo', 'f2a9'],
+  ['viadeo square', 'f2aa'],
+  ['viber', 'f409'],
+  ['video', 'f03d'],
+  ['vimeo', 'f40a'],
+  ['vimeo square', 'f194'],
+  ['vimeo v', 'f27d'],
+  ['vine', 'f1ca'],
+  ['vk', 'f189'],
+  ['vnv', 'f40b'],
+  ['volleyball ball', 'f45f'],
+  ['volume down', 'f027'],
+  ['volume off', 'f026'],
+  ['volume up', 'f028'],
+  ['vuejs', 'f41f'],
+  ['warehouse', 'f494'],
+  ['weibo', 'f18a'],
+  ['weight', 'f496'],
+  ['weixin', 'f1d7'],
+  ['whatsapp', 'f232'],
+  ['whatsapp square', 'f40c'],
+  ['wheelchair', 'f193'],
+  ['whmcs', 'f40d'],
+  ['wifi', 'f1eb'],
+  ['wikipedia w', 'f266'],
+  ['window close', 'f410'],
+  ['window maximize', 'f2d0'],
+  ['window minimize', 'f2d1'],
+  ['window restore', 'f2d2'],
+  ['windows', 'f17a'],
+  ['won sign', 'f159'],
+  ['wordpress', 'f19a'],
+  ['wordpress simple', 'f411'],
+  ['wpbeginner', 'f297'],
+  ['wpexplorer', 'f2de'],
+  ['wpforms', 'f298'],
+  ['wrench', 'f0ad'],
+  ['xbox', 'f412'],
+  ['xing', 'f168'],
+  ['xing square', 'f169'],
+  ['y combinator', 'f23b'],
+  ['yahoo', 'f19e'],
+  ['yandex', 'f413'],
+  ['yandex international', 'f414'],
+  ['yelp', 'f1e9'],
+  ['yen sign', 'f157'],
+  ['yoast', 'f2b1'],
+  ['youtube', 'f167'],
+  ['youtube square', 'f431'],
+
+  // Aliases
+  ['chess rock', 'f447'],
+  ['ordered list', 'f0cb'],
+  ['unordered list', 'f0ca'],
+  ['user doctor', 'f0f0'],
+  ['shield', 'f3ed'],
+  ['puzzle', 'f12e'],
+  ['credit card amazon pay', 'f42d'],
+  ['credit card american express', 'f1f3'],
+  ['credit card diners club', 'f24c'],
+  ['credit card discover', 'f1f2'],
+  ['credit card jcb', 'f24b'],
+  ['credit card mastercard', 'f1f1'],
+  ['credit card paypal', 'f1f4'],
+  ['credit card stripe', 'f1f5'],
+  ['credit card visa', 'f1f0'],
+  ['add circle', 'f055'],
+  ['add square', 'f0fe'],
+  ['add to calendar', 'f271'],
+  ['add to cart', 'f217'],
+  ['add user', 'f234'],
+  ['add', 'f067'],
+  ['alarm mute', 'f1f6'],
+  ['alarm', 'f0f3'],
+  ['ald', 'f2a2'],
+  ['als', 'f2a2'],
+  ['american express card', 'f1f3'],
+  ['american express', 'f1f3'],
+  ['amex', 'f1f3'],
+  ['announcement', 'f0a1'],
+  ['area chart', 'f1fe'],
+  ['area graph', 'f1fe'],
+  ['arrow down cart', 'f218'],
+  ['asexual', 'f22d'],
+  ['asl interpreting', 'f2a3'],
+  ['asl', 'f2a3'],
+  ['assistive listening devices', 'f2a2'],
+  ['attach', 'f0c6'],
+  ['attention', 'f06a'],
+  ['balance', 'f24e'],
+  ['bar', 'f0fc'],
+  ['bathtub', 'f2cd'],
+  ['battery four', 'f240'],
+  ['battery high', 'f241'],
+  ['battery low', 'f243'],
+  ['battery medium', 'f242'],
+  ['battery one', 'f243'],
+  ['battery three', 'f241'],
+  ['battery two', 'f242'],
+  ['battery zero', 'f244'],
+  ['birthday', 'f1fd'],
+  ['block layout', 'f009'],
+  ['bluetooth alternative', 'f294'],
+  ['broken chain', 'f127'],
+  ['browser', 'f022'],
+  ['call square', 'f098'],
+  ['call', 'f095'],
+  ['cancel', 'f00d'],
+  ['cart', 'f07a'],
+  ['cc', 'f20a'],
+  ['chain', 'f0c1'],
+  ['chat', 'f075'],
+  ['checked calendar', 'f274'],
+  ['checkmark', 'f00c'],
+  ['circle notched', 'f1ce'],
+  ['close', 'f00d'],
+  ['cny', 'f157'],
+  ['cocktail', 'f000'],
+  ['commenting', 'f27a'],
+  ['computer', 'f108'],
+  ['configure', 'f0ad'],
+  ['content', 'f0c9'],
+  ['deafness', 'f2a4'],
+  ['delete calendar', 'f273'],
+  ['delete', 'f00d'],
+  ['detective', 'f21b'],
+  ['diners club card', 'f24c'],
+  ['diners club', 'f24c'],
+  ['discover card', 'f1f2'],
+  ['discover', 'f1f2'],
+  ['discussions', 'f086'],
+  ['doctor', 'f0f0'],
+  ['dollar', 'f155'],
+  ['dont', 'f05e'],
+  ['dribble', 'f17d'],
+  ['drivers license', 'f2c2'],
+  ['dropdown', 'f0d7'],
+  ['eercast', 'f2da'],
+  ['emergency', 'f0f9'],
+  ['envira gallery', 'f299'],
+  ['erase', 'f12d'],
+  ['eur', 'f153'],
+  ['euro', 'f153'],
+  ['eyedropper', 'f1fb'],
+  ['fa', 'f2b4'],
+  ['factory', 'f275'],
+  ['favorite', 'f005'],
+  ['feed', 'f09e'],
+  ['female homosexual', 'f226'],
+  ['file text', 'f15c'],
+  ['find', 'f1e5'],
+  ['first aid', 'f0fa'],
+  ['five hundred pixels', 'f26e'],
+  ['fork', 'f126'],
+  ['game', 'f11b'],
+  ['gay', 'f227'],
+  ['gbp', 'f154'],
+  ['gittip', 'f184'],
+  ['google plus circle', 'f2b3'],
+  ['google plus official', 'f2b3'],
+  ['grab', 'f255'],
+  ['graduation', 'f19d'],
+  ['grid layout', 'f00a'],
+  ['group', 'f0c0'],
+  ['h', 'f0fd'],
+  ['hand victory', 'f25b'],
+  ['handicap', 'f193'],
+  ['hard of hearing', 'f2a4'],
+  ['header', 'f1dc'],
+  ['help circle', 'f059'],
+  ['help', 'f128'],
+  ['heterosexual', 'f228'],
+  ['hide', 'f070'],
+  ['hotel', 'f236'],
+  ['hourglass four', 'f254'],
+  ['hourglass full', 'f254'],
+  ['hourglass one', 'f251'],
+  ['hourglass three', 'f253'],
+  ['hourglass two', 'f252'],
+  ['idea', 'f0eb'],
+  ['ils', 'f20b'],
+  ['in-cart', 'f218'],
+  ['inr', 'f156'],
+  ['intergender', 'f224'],
+  ['intersex', 'f224'],
+  ['japan credit bureau card', 'f24b'],
+  ['japan credit bureau', 'f24b'],
+  ['jcb', 'f24b'],
+  ['jpy', 'f157'],
+  ['krw', 'f159'],
+  ['lab', 'f0c3'],
+  ['law', 'f24e'],
+  ['legal', 'f0e3'],
+  ['lesbian', 'f226'],
+  ['lightning', 'f0e7'],
+  ['like', 'f004'],
+  ['line graph', 'f201'],
+  ['linkedin square', 'f08c'],
+  ['linkify', 'f0c1'],
+  ['lira', 'f195'],
+  ['list layout', 'f00b'],
+  ['magnify', 'f00e'],
+  ['mail forward', 'f064'],
+  ['mail square', 'f199'],
+  ['mail', 'f0e0'],
+  ['male homosexual', 'f227'],
+  ['man', 'f222'],
+  ['marker', 'f041'],
+  ['mars alternate', 'f229'],
+  ['mars horizontal', 'f22b'],
+  ['mars vertical', 'f22a'],
+  ['mastercard card', 'f1f1'],
+  ['mastercard', 'f1f1'],
+  ['microsoft edge', 'f282'],
+  ['military', 'f0fb'],
+  ['ms edge', 'f282'],
+  ['mute', 'f131'],
+  ['new pied piper', 'f2ae'],
+  ['non binary transgender', 'f223'],
+  ['numbered list', 'f0cb'],
+  ['optinmonster', 'f23c'],
+  ['options', 'f1de'],
+  ['other gender horizontal', 'f22b'],
+  ['other gender vertical', 'f22a'],
+  ['other gender', 'f229'],
+  ['payment', 'f09d'],
+  ['paypal card', 'f1f4'],
+  ['pencil square', 'f14b'],
+  ['photo', 'f030'],
+  ['picture', 'f03e'],
+  ['pie chart', 'f200'],
+  ['pie graph', 'f200'],
+  ['pied piper hat', 'f2ae'],
+  ['pin', 'f08d'],
+  ['plus cart', 'f217'],
+  ['pocket', 'f265'],
+  ['point', 'f041'],
+  ['pointing down', 'f0a7'],
+  ['pointing left', 'f0a5'],
+  ['pointing right', 'f0a4'],
+  ['pointing up', 'f0a6'],
+  ['pound', 'f154'],
+  ['power cord', 'f1e6'],
+  ['power', 'f011'],
+  ['privacy', 'f084'],
+  ['r circle', 'f25d'],
+  ['rain', 'f0e9'],
+  ['record', 'f03d'],
+  ['refresh', 'f021'],
+  ['remove circle', 'f057'],
+  ['remove from calendar', 'f272'],
+  ['remove user', 'f235'],
+  ['remove', 'f00d'],
+  ['repeat', 'f01e'],
+  ['rmb', 'f157'],
+  ['rouble', 'f158'],
+  ['rub', 'f158'],
+  ['ruble', 'f158'],
+  ['rupee', 'f156'],
+  ['s15', 'f2cd'],
+  ['selected radio', 'f192'],
+  ['send', 'f1d8'],
+  ['setting', 'f013'],
+  ['settings', 'f085'],
+  ['shekel', 'f20b'],
+  ['sheqel', 'f20b'],
+  ['shipping', 'f0d1'],
+  ['shop', 'f07a'],
+  ['shuffle', 'f074'],
+  ['shutdown', 'f011'],
+  ['sidebar', 'f0c9'],
+  ['signing', 'f2a7'],
+  ['signup', 'f044'],
+  ['sliders', 'f1de'],
+  ['soccer', 'f1e3'],
+  ['sort alphabet ascending', 'f15d'],
+  ['sort alphabet descending', 'f15e'],
+  ['sort ascending', 'f0de'],
+  ['sort content ascending', 'f160'],
+  ['sort content descending', 'f161'],
+  ['sort descending', 'f0dd'],
+  ['sort numeric ascending', 'f162'],
+  ['sort numeric descending', 'f163'],
+  ['sound', 'f025'],
+  ['spy', 'f21b'],
+  ['stripe card', 'f1f5'],
+  ['student', 'f19d'],
+  ['talk', 'f27a'],
+  ['target', 'f140'],
+  ['teletype', 'f1e4'],
+  ['television', 'f26c'],
+  ['text cursor', 'f246'],
+  ['text telephone', 'f1e4'],
+  ['theme isle', 'f2b2'],
+  ['theme', 'f043'],
+  ['thermometer', 'f2c7'],
+  ['thumb tack', 'f08d'],
+  ['time', 'f017'],
+  ['tm', 'f25c'],
+  ['toggle down', 'f150'],
+  ['toggle left', 'f191'],
+  ['toggle right', 'f152'],
+  ['toggle up', 'f151'],
+  ['translate', 'f1ab'],
+  ['travel', 'f0b1'],
+  ['treatment', 'f0f1'],
+  ['triangle down', 'f0d7'],
+  ['triangle left', 'f0d9'],
+  ['triangle right', 'f0da'],
+  ['triangle up', 'f0d8'],
+  ['try', 'f195'],
+  ['unhide', 'f06e'],
+  ['unlinkify', 'f127'],
+  ['unmute', 'f130'],
+  ['usd', 'f155'],
+  ['user cancel', 'f235'],
+  ['user close', 'f235'],
+  ['user delete', 'f235'],
+  ['user x', 'f235'],
+  ['vcard', 'f2bb'],
+  ['video camera', 'f03d'],
+  ['video play', 'f144'],
+  ['visa card', 'f1f0'],
+  ['visa', 'f1f0'],
+  ['volume control phone', 'f2a0'],
+  ['wait', 'f017'],
+  ['warning circle', 'f06a'],
+  ['warning sign', 'f071'],
+  ['warning', 'f12a'],
+  ['wechat', 'f1d7'],
+  ['wi-fi', 'f1eb'],
+  ['wikipedia', 'f266'],
+  ['winner', 'f091'],
+  ['wizard', 'f0d0'],
+  ['woman', 'f221'],
+  ['won', 'f159'],
+  ['wordpress beginner', 'f297'],
+  ['wordpress forms', 'f298'],
+  ['world', 'f0ac'],
+  ['write square', 'f14b'],
+  ['x', 'f00d'],
+  ['yc', 'f23b'],
+  ['ycombinator', 'f23b'],
+  ['yen', 'f157'],
+  ['zip', 'f187'],
+  ['zoom-in', 'f00e'],
+  ['zoom-out', 'f010'],
+  ['zoom', 'f00e'],
+  ['bitbucket square', 'f171'],
+  ['checkmark box', 'f14a'],
+  ['circle thin', 'f111'],
+  ['cloud download', 'f381'],
+  ['cloud upload', 'f382'],
+  ['compose', 'f303'],
+  ['conversation', 'f086'],
+  ['credit card alternative', 'f09d'],
+  ['currency', 'f3d1'],
+  ['dashboard', 'f3fd'],
+  ['diamond', 'f3a5'],
+  ['disk', 'f0a0'],
+  ['exchange', 'f362'],
+  ['external share', 'f14d'],
+  ['external square', 'f360'],
+  ['external', 'f35d'],
+  ['facebook official', 'f082'],
+  ['food', 'f2e7'],
+  ['hourglass zero', 'f253'],
+  ['level down', 'f3be'],
+  ['level up', 'f3bf'],
+  ['logout', 'f2f5'],
+  ['meanpath', 'f0c8'],
+  ['money', 'f3d1'],
+  ['move', 'f0b2'],
+  ['pencil', 'f303'],
+  ['protect', 'f023'],
+  ['radio', 'f192'],
+  ['remove bookmark', 'f02e'],
+  ['resize horizontal', 'f337'],
+  ['resize vertical', 'f338'],
+  ['sign-in', 'f2f6'],
+  ['sign-out', 'f2f5'],
+  ['spoon', 'f2e5'],
+  ['star half empty', 'f089'],
+  ['star half full', 'f089'],
+  ['ticket', 'f3ff'],
+  ['times rectangle', 'f410'],
+  ['write', 'f303'],
+  ['youtube play', 'f167'],
+  ['address book outline', 'f2b9'],
+  ['address card outline', 'f2bb'],
+  ['arrow alternate circle down outline', 'f358'],
+  ['arrow alternate circle left outline', 'f359'],
+  ['arrow alternate circle right outline', 'f35a'],
+  ['arrow alternate circle up outline', 'f35b'],
+  ['bell outline', 'f0f3'],
+  ['bell slash outline', 'f1f6'],
+  ['bookmark outline', 'f02e'],
+  ['building outline', 'f1ad'],
+  ['calendar outline', 'f133'],
+  ['calendar alternate outline', 'f073'],
+  ['calendar check outline', 'f274'],
+  ['calendar minus outline', 'f272'],
+  ['calendar plus outline', 'f271'],
+  ['calendar times outline', 'f273'],
+  ['caret square down outline', 'f150'],
+  ['caret square left outline', 'f191'],
+  ['caret square right outline', 'f152'],
+  ['caret square up outline', 'f151'],
+  ['chart bar outline', 'f080'],
+  ['check circle outline', 'f058'],
+  ['check square outline', 'f14a'],
+  ['circle outline', 'f111'],
+  ['clipboard outline', 'f328'],
+  ['clock outline', 'f017'],
+  ['clone outline', 'f24d'],
+  ['closed captioning outline', 'f20a'],
+  ['comment outline', 'f075'],
+  ['comment alternate outline', 'f27a'],
+  ['comments outline', 'f086'],
+  ['compass outline', 'f14e'],
+  ['copy outline', 'f0c5'],
+  ['copyright outline', 'f1f9'],
+  ['credit card outline', 'f09d'],
+  ['dot circle outline', 'f192'],
+  ['edit outline', 'f044'],
+  ['envelope outline', 'f0e0'],
+  ['envelope open outline', 'f2b6'],
+  ['eye slash outline', 'f070'],
+  ['file outline', 'f15b'],
+  ['file alternate outline', 'f15c'],
+  ['file archive outline', 'f1c6'],
+  ['file audio outline', 'f1c7'],
+  ['file code outline', 'f1c9'],
+  ['file excel outline', 'f1c3'],
+  ['file image outline', 'f1c5'],
+  ['file pdf outline', 'f1c1'],
+  ['file powerpoint outline', 'f1c4'],
+  ['file video outline', 'f1c8'],
+  ['file word outline', 'f1c2'],
+  ['flag outline', 'f024'],
+  ['folder outline', 'f07b'],
+  ['folder open outline', 'f07c'],
+  ['frown outline', 'f119'],
+  ['futbol outline', 'f1e3'],
+  ['gem outline', 'f3a5'],
+  ['hand lizard outline', 'f258'],
+  ['hand paper outline', 'f256'],
+  ['hand peace outline', 'f25b'],
+  ['hand point down outline', 'f0a7'],
+  ['hand point left outline', 'f0a5'],
+  ['hand point right outline', 'f0a4'],
+  ['hand point up outline', 'f0a6'],
+  ['hand pointer outline', 'f25a'],
+  ['hand rock outline', 'f255'],
+  ['hand scissors outline', 'f257'],
+  ['hand spock outline', 'f259'],
+  ['handshake outline', 'f2b5'],
+  ['hdd outline', 'f0a0'],
+  ['heart outline', 'f004'],
+  ['hospital outline', 'f0f8'],
+  ['hourglass outline', 'f254'],
+  ['id badge outline', 'f2c1'],
+  ['id card outline', 'f2c2'],
+  ['image outline', 'f03e'],
+  ['images outline', 'f302'],
+  ['keyboard outline', 'f11c'],
+  ['lemon outline', 'f094'],
+  ['life ring outline', 'f1cd'],
+  ['lightbulb outline', 'f0eb'],
+  ['list alternate outline', 'f022'],
+  ['map outline', 'f279'],
+  ['meh outline', 'f11a'],
+  ['minus square outline', 'f146'],
+  ['money bill alternate outline', 'f3d1'],
+  ['moon outline', 'f186'],
+  ['newspaper outline', 'f1ea'],
+  ['object group outline', 'f247'],
+  ['object ungroup outline', 'f248'],
+  ['paper plane outline', 'f1d8'],
+  ['pause circle outline', 'f28b'],
+  ['play circle outline', 'f144'],
+  ['plus square outline', 'f0fe'],
+  ['question circle outline', 'f059'],
+  ['registered outline', 'f25d'],
+  ['save outline', 'f0c7'],
+  ['share square outline', 'f14d'],
+  ['smile outline', 'f118'],
+  ['snowflake outline', 'f2dc'],
+  ['square outline', 'f0c8'],
+  ['star outline', 'f005'],
+  ['star half outline', 'f089'],
+  ['sticky note outline', 'f249'],
+  ['stop circle outline', 'f28d'],
+  ['sun outline', 'f185'],
+  ['thumbs down outline', 'f165'],
+  ['thumbs up outline', 'f164'],
+  ['times circle outline', 'f057'],
+  ['trash alternate outline', 'f2ed'],
+  ['user outline', 'f007'],
+  ['user circle outline', 'f2bd'],
+  ['window close outline', 'f410'],
+  ['window maximize outline', 'f2d0'],
+  ['window minimize outline', 'f2d1'],
+  ['window restore outline', 'f2d2'],
+  ['disk outline', 'f369'],
+
+  // Outline Aliases
+  ['heart empty', 'f004'],
+  ['star empty', 'f089'],
+])
+
+export default name => fontAwesomeIcons.get(name)
+
+/**
+ * TODO We should probably declare a @fontface rule here
+ */
diff --git a/src/themes/default/components/Icon/iconStyles.ts b/src/themes/default/components/Icon/iconStyles.ts
new file mode 100644
index 0000000000..80b009ed84
--- /dev/null
+++ b/src/themes/default/components/Icon/iconStyles.ts
@@ -0,0 +1,131 @@
+import fontAwesomeIcons from './fontAwesomeIconStyles'
+import { callable } from '../../../../lib'
+import { disabledStyle, fittedStyle } from '../../../../styles/customCSS'
+import { FontIconSpec, IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
+import { ResultOf } from '../../../../../types/utils'
+import { IconXSpacing, IIconProps } from '../../../../components/Icon/Icon'
+
+import { getStyle as getSvgStyle } from './svg'
+
+const sizes = new Map([
+  ['micro', 0.3],
+  ['mini', 0.4],
+  ['tiny', 0.5],
+  ['small', 0.75],
+  ['normal', 1],
+  ['large', 1.5],
+  ['big', 2],
+  ['huge', 4],
+  ['massive', 8],
+])
+
+const getDefaultFontIcon = (iconName: string) => {
+  const fontFamily = iconName && iconName.includes('outline') ? 'outline-icons' : 'Icons'
+  const content = (iconName && `'\\${fontAwesomeIcons(iconName)}'`) || '?'
+
+  return { content, fontFamily }
+}
+
+const getSize = size => `${sizes.get(size)}em`
+
+const getFontStyles = (iconName: string, themeIcon?: ResultOf<FontIconSpec>): ICSSInJSStyle => {
+  const { fontFamily, content } = themeIcon || getDefaultFontIcon(iconName)
+
+  return {
+    fontFamily,
+    width: '1.18em',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    textDecoration: 'inherit',
+    textAlign: 'center',
+
+    '-webkit-font-smoothing': 'antialiased',
+    '-moz-osx-font-smoothing': 'grayscale',
+    backfaceVisibility: 'hidden',
+
+    lineHeight: 1,
+
+    '::before': {
+      content,
+      boxSizing: 'inherit',
+      background: '0 0',
+    },
+  }
+}
+
+const getXSpacingStyles = (xSpacing: IconXSpacing, horizontalSpace: string): ICSSInJSStyle => {
+  switch (xSpacing) {
+    case 'none':
+      return fittedStyle
+    case 'before':
+      return { ...fittedStyle, marginLeft: horizontalSpace }
+    case 'after':
+      return { ...fittedStyle, marginRight: horizontalSpace }
+    case 'both':
+      return { ...fittedStyle, margin: `0 ${horizontalSpace}` }
+  }
+}
+
+const getBorderedStyles = (isFontBased, circular, borderColor, color): ICSSInJSStyle => {
+  return {
+    ...getPaddedStyle(isFontBased),
+
+    // TODO: "black" here should actually match the Icon's fill or text color
+    boxShadow: `0 0 0 0.05em ${borderColor || color || 'black'} inset`,
+    ...(circular ? { borderRadius: '50%' } : {}),
+  }
+}
+
+const getPaddedStyle = (isFontBased: boolean): ICSSInJSStyle => ({
+  padding: `0.5em ${isFontBased ? 0 : '0.5em'}`,
+  width: '2em',
+  height: '2em',
+})
+
+const iconStyles: IComponentPartStylesInput<IIconProps, any> = {
+  root: ({
+    props: { disabled, name, size, bordered, circular, xSpacing },
+    variables: v,
+    theme,
+  }): ICSSInJSStyle => {
+    const iconSpec = theme.icons[name]
+    const isFontBased = !iconSpec || !iconSpec.isSvg
+
+    return {
+      display: 'inline-block',
+      fontSize: getSize(size),
+
+      width: '1em',
+      height: '1em',
+
+      ...(isFontBased &&
+        getFontStyles(name, callable(iconSpec && (iconSpec.icon as FontIconSpec))())),
+
+      ...(isFontBased && { color: v.color }),
+      backgroundColor: v.backgroundColor,
+
+      opacity: 1,
+      margin: v.margin,
+
+      speak: 'none',
+
+      verticalAlign: 'middle',
+      overflow: 'hidden',
+
+      ...getXSpacingStyles(xSpacing, v.horizontalSpace),
+
+      ...((bordered || v.borderColor || circular) &&
+        getBorderedStyles(isFontBased, circular, v.borderColor, v.color)),
+
+      ...(disabled && disabledStyle),
+    }
+  },
+
+  svg: getSvgStyle('svg'),
+
+  g: getSvgStyle('g'),
+
+  /* additional SVG styles for different paths could be added/used in the same way */
+}
+
+export default iconStyles
diff --git a/src/themes/default/components/Icon/iconVariables.ts b/src/themes/default/components/Icon/iconVariables.ts
new file mode 100644
index 0000000000..a2c58b3d07
--- /dev/null
+++ b/src/themes/default/components/Icon/iconVariables.ts
@@ -0,0 +1,21 @@
+import { pxToRem } from '../../../../lib'
+
+export interface IconVariables {
+  [key: string]: string | number | undefined
+
+  color?: string
+  backgroundColor?: string
+  borderColor?: string
+  horizontalSpace: string
+  margin: string
+}
+
+export default (): IconVariables => ({
+  color: undefined,
+  // TODO move initial variable discovery to JSON files
+  // similar to how components have an info.json file
+  backgroundColor: undefined,
+  borderColor: undefined,
+  horizontalSpace: pxToRem(10),
+  margin: '0 0.25em 0 0',
+})
diff --git a/src/themes/default/components/Icon/svg/icons/call.tsx b/src/themes/default/components/Icon/svg/icons/call.tsx
new file mode 100644
index 0000000000..cd16790278
--- /dev/null
+++ b/src/themes/default/components/Icon/svg/icons/call.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default {
+  icon: ({ classes }) => (
+    <svg viewBox="0 0 32 32" role="presentation" focusable="false" className={classes.svg}>
+      <g>
+        <path
+          d="M19.5,23c-0.1,0-0.3,0-0.4-0.1c-2.6-0.8-4.8-2.4-6.4-4.6l0,0c-1.6-2.2-2.3-4.9-2.1-7.6c0-0.6,0.4-1.1,0.9-1.3l0.8-0.4
+                        c0.9-0.4,1.9,0,2.3,0.8l0.3,0.7c0.5,1,0.8,2.5-0.1,3.4l-0.6,0.6c-0.2,0.2-0.2,0.5-0.1,0.7l1.9,2.8c0.1,0.2,0.4,0.3,0.6,0.2l0.7-0.3
+                        c1.3-0.5,2.6,0.3,3.3,1.1l0.5,0.5c0.6,0.7,0.6,1.8,0,2.4l-0.6,0.7C20.3,22.9,19.9,23,19.5,23z M13.5,17.8c1.4,2,3.5,3.5,5.8,4.2
+                        c0.2,0.1,0.4,0,0.5-0.1l0.6-0.7c0.3-0.3,0.3-0.8,0-1.1L20,19.6c-0.6-0.6-1.4-1.1-2.2-0.8l-0.7,0.3c-0.7,0.3-1.5,0.1-1.9-0.5
+                        l-1.9-2.8c-0.4-0.6-0.4-1.4,0.2-1.9l0.5-0.6c0.5-0.6,0.3-1.6-0.1-2.3l-0.3-0.7c-0.2-0.4-0.6-0.5-1-0.4l-0.8,0.4
+                        c-0.2,0.1-0.3,0.3-0.3,0.5C11.4,13.4,12.1,15.8,13.5,17.8L13.5,17.8z"
+        />
+        <path
+          d="M19.5,23c-0.1,0-0.3,0-0.4-0.1c-2.6-0.8-4.8-2.4-6.4-4.6l0,0c-1.6-2.2-2.3-4.9-2.1-7.6c0-0.6,0.4-1.1,0.9-1.3L12.3,9
+                        c0.9-0.4,1.9,0,2.3,0.8l0.3,0.7c0.5,1,0.8,2.5-0.1,3.4l-0.6,0.6C14,14.7,14,15,14.1,15.2L16,18c0.1,0.2,0.4,0.3,0.6,0.2l0.7-0.3
+                        c1.3-0.5,2.6,0.3,3.3,1.1l0.5,0.5c0.6,0.7,0.6,1.8,0,2.4l-0.6,0.7C20.3,22.9,19.9,23,19.5,23z"
+        />
+      </g>
+    </svg>
+  ),
+  styles: {
+    svg: ({ props, variables }) => {
+      return {
+        fill: variables.color,
+      }
+    },
+  },
+} as TeamsSvgIconSpec
diff --git a/src/themes/default/components/Icon/svg/icons/callControlPresentNew.tsx b/src/themes/default/components/Icon/svg/icons/callControlPresentNew.tsx
new file mode 100644
index 0000000000..0a9e17e190
--- /dev/null
+++ b/src/themes/default/components/Icon/svg/icons/callControlPresentNew.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg viewBox="0 0 32 32" role="presentation">
+    <path
+      d="M22.5,9h-13C8.672852,9,8,9.672852,8,10.5v9C8,20.327148,8.672852,21,9.5,21H13c0.276367,0,0.5-0.223633,0.5-0.5
+            S13.276367,20,13,20H9.5C9.224121,20,9,19.775391,9,19.5v-9C9,10.224121,9.224121,10,9.5,10h13c0.275391,0,0.5,0.224121,0.5,0.5v9
+            c0,0.275391-0.224609,0.5-0.5,0.5H19c-0.276367,0-0.5,0.223633-0.5,0.5S18.723633,21,19,21h3.5c0.827148,0,1.5-0.672852,1.5-1.5v-9
+            C24,9.672852,23.327148,9,22.5,9z"
+    />
+    <path
+      d="M19,18c0.255859,0,0.511719-0.097656,0.707031-0.292969c0.390625-0.390625,0.390625-1.023438,0-1.414062
+            l-2.999695-2.999695c-0.092163-0.092285-0.20282-0.165344-0.325195-0.216064c-0.244507-0.101135-0.519775-0.101135-0.764282,0
+            c-0.122375,0.05072-0.233032,0.123779-0.325195,0.216064l-2.999695,2.999695c-0.390625,0.390625-0.390625,1.023438,0,1.414062
+            C12.488281,17.902344,12.744141,18,13,18s0.511719-0.097656,0.707031-0.292969L15,16.414062V22.5c0,0.552734,0.447754,1,1,1
+            s1-0.447266,1-1v-6.085938l1.292969,1.292969C18.488281,17.902344,18.744141,18,19,18z"
+    />
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/default/components/Icon/svg/icons/callControlStopPresentingNew.tsx b/src/themes/default/components/Icon/svg/icons/callControlStopPresentingNew.tsx
new file mode 100644
index 0000000000..e4b84b13d2
--- /dev/null
+++ b/src/themes/default/components/Icon/svg/icons/callControlStopPresentingNew.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg viewBox="0 0 32 32" role="presentation">
+    <path
+      d="M22.5,9h-13C8.672852,9,8,9.672852,8,10.5v9C8,20.327148,8.672852,21,9.5,21h2.006836c0.276367,0,0.5-0.223633,0.5-0.5
+                s-0.223633-0.5-0.5-0.5H9.5C9.224121,20,9,19.775391,9,19.5v-9C9,10.224121,9.224121,10,9.5,10h13c0.275391,0,0.5,0.224121,0.5,0.5
+                v9c0,0.275391-0.224609,0.5-0.5,0.5h-2.066406c-0.276367,0-0.5,0.223633-0.5,0.5s0.223633,0.5,0.5,0.5H22.5
+                c0.827148,0,1.5-0.672852,1.5-1.5v-9C24,9.672852,23.327148,9,22.5,9z"
+    />
+    <path
+      d="M19.207031,16.292969c-0.390625-0.390625-1.023438-0.390625-1.414062,0L16,18.085938l-1.792969-1.792969
+                c-0.390625-0.390625-1.023438-0.390625-1.414062,0s-0.390625,1.023438,0,1.414062L14.585938,19.5l-1.792969,1.792969
+                c-0.390625,0.390625-0.390625,1.023438,0,1.414062C12.988281,22.902344,13.244141,23,13.5,23s0.511719-0.097656,0.707031-0.292969
+                L16,20.914062l1.792969,1.792969C17.988281,22.902344,18.244141,23,18.5,23s0.511719-0.097656,0.707031-0.292969
+                c0.390625-0.390625,0.390625-1.023438,0-1.414062L17.414062,19.5l1.792969-1.792969
+                C19.597656,17.316406,19.597656,16.683594,19.207031,16.292969z"
+    />
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/default/components/Icon/svg/icons/callEnd.tsx b/src/themes/default/components/Icon/svg/icons/callEnd.tsx
new file mode 100644
index 0000000000..c266dba22b
--- /dev/null
+++ b/src/themes/default/components/Icon/svg/icons/callEnd.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg role="presentation" viewBox="0 0 32 32">
+    <path
+      d="M23.4,15.6C21.3,13.9,18.7,13,16,13s-5.3,0.9-7.4,2.6C8.1,16,7.9,16.5,8,17.1c0,0.1,0.2,0.5,0.2,0.5
+                c0.4,0.6,0.9,1.4,1.9,1.2l0.7-0.1c1.1-0.2,2.5-0.8,2.7-2.1l0.2-1.1l4.2,0l0.2,1.1c0.3,1.3,1.7,1.9,2.7,2l0.7,0.1c0.1,0,0.2,0,0.2,0
+                c0.7,0,1.1-0.5,1.5-1c0,0,0.4-0.7,0.4-0.7C24.1,16.5,23.9,16,23.4,15.6z"
+    />
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/default/components/Icon/svg/icons/callIncomingVideo.tsx b/src/themes/default/components/Icon/svg/icons/callIncomingVideo.tsx
new file mode 100644
index 0000000000..38dd12913f
--- /dev/null
+++ b/src/themes/default/components/Icon/svg/icons/callIncomingVideo.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg viewBox="0 0 32 32" role="presentation">
+    <g>
+      <path d="M23.6968,12.0403c-0.1836-0.0786-0.3975-0.04-0.542,0.0981l-2.5317,2.4165C20.2212,14.9382,20,15.4514,20,16  c0,0.5483,0.2212,1.0615,0.623,1.4448l2.5317,2.4167C23.2495,19.9521,23.374,20,23.5,20c0.0664,0,0.1333-0.0132,0.1968-0.0403  C23.8809,19.8809,24,19.7002,24,19.5v-7C24,12.2998,23.8809,12.1191,23.6968,12.0403z M23,18.3315l-1.6865-1.6099v-0.0002  C21.1113,16.5286,21,16.2725,21,16s0.1113-0.5286,0.3135-0.7217L23,13.6685V18.3315z" />
+      <path d="M17.5,11H9.8193c-0.7056,0-1.3232,0.5393-1.4692,1.2822C8.1177,13.4619,8,14.7129,8,16s0.1177,2.5381,0.3501,3.7173  C8.4961,20.4607,9.1138,21,9.8193,21H17.5c0.8271,0,1.5-0.6729,1.5-1.5v-7C19,11.6729,18.3271,11,17.5,11z M18,19.5  c0,0.2756-0.2241,0.5-0.5,0.5H9.8193c-0.2285,0-0.4341-0.2-0.4878-0.4756C9.1113,18.4082,9,17.2224,9,16  s0.1113-2.4082,0.3315-3.5249C9.3853,12.2,9.5908,12,9.8193,12H17.5c0.2759,0,0.5,0.2244,0.5,0.5V19.5z" />
+      <path d="M23.6968,12.0403c-0.1841-0.0786-0.3975-0.04-0.542,0.0981l-2.5317,2.4165C20.2212,14.9382,20,15.4514,20,16  c0,0.5483,0.2212,1.0615,0.623,1.4448l2.5317,2.4167C23.2495,19.9521,23.374,20,23.5,20c0.0664,0,0.1333-0.0132,0.1968-0.0403  C23.8809,19.8809,24,19.7002,24,19.5v-7C24,12.2998,23.8809,12.1191,23.6968,12.0403z" />
+      <path d="M17.5,11H9.8193c-0.7056,0-1.3232,0.5393-1.4692,1.2822C8.1177,13.4619,8,14.7129,8,16s0.1177,2.5381,0.3501,3.7173  C8.4961,20.4607,9.1138,21,9.8193,21H17.5c0.8271,0,1.5-0.6729,1.5-1.5v-7C19,11.6729,18.3271,11,17.5,11z" />
+    </g>
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/default/components/Icon/svg/icons/callIncomingVideoOff.tsx b/src/themes/default/components/Icon/svg/icons/callIncomingVideoOff.tsx
new file mode 100644
index 0000000000..59e9cbf9ae
--- /dev/null
+++ b/src/themes/default/components/Icon/svg/icons/callIncomingVideoOff.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg role="presentation" viewBox="-4 -4 40 40">
+    <path
+      d="M26,6.5859c0,0.1694-0.0615,0.3159-0.1855,0.4395L19.75,13.0996v7.2363c0,0.2539-0.0508,0.4941-0.1514,0.7227
+              s-0.2363,0.4258-0.4053,0.5957s-0.3682,0.3047-0.5957,0.4053s-0.4688,0.1514-0.7227,0.1514h-7.2363l-3.5742,3.5645
+              c-0.124,0.123-0.2705,0.1855-0.4395,0.1855s-0.3154-0.0625-0.4395-0.1855S6,25.5059,6,25.3359s0.0615-0.3164,0.1855-0.4395
+              l18.75-18.75c0.124-0.1235,0.2705-0.1855,0.4395-0.1855s0.3154,0.062,0.4395,0.1855S26,6.4165,26,6.5859z M19.0469,10.1406
+              l-0.8984,0.8887c-0.0908-0.0454-0.1826-0.0684-0.2734-0.0684H8.2754c-0.1885,0-0.3438,0.1074-0.4639,0.3223
+              s-0.2197,0.4917-0.2979,0.8301s-0.1348,0.7129-0.1709,1.123s-0.0605,0.8105-0.0732,1.2012S7.25,15.186,7.25,15.5117
+              s0,0.5664,0,0.7227c0,0.1304,0.002,0.3335,0.0049,0.6104c0.0029,0.2764,0.0127,0.5869,0.0293,0.9326s0.042,0.6992,0.0781,1.0645
+              s0.0908,0.7012,0.166,1.0107s0.1689,0.5654,0.2832,0.7666s0.2559,0.3125,0.4248,0.332l-0.9473,0.9473
+              c-0.2217-0.1504-0.4072-0.3662-0.5566-0.6494s-0.2715-0.6045-0.3662-0.9619s-0.168-0.7373-0.2197-1.1377
+              s-0.0879-0.7959-0.1074-1.1865s-0.0312-0.7598-0.0342-1.1084C6.002,16.5063,6,16.2085,6,15.9609
+              c0-0.3843,0.0029-0.7729,0.0098-1.167s0.0244-0.7861,0.0537-1.1768s0.0732-0.7798,0.1318-1.167s0.1396-0.7666,0.2441-1.1377
+              c0.0586-0.2212,0.1416-0.4297,0.249-0.625s0.2373-0.3647,0.3906-0.5078s0.3291-0.2573,0.5273-0.3418s0.4219-0.127,0.6689-0.127
+              h9.5996c0.2148,0,0.4229,0.0376,0.625,0.1123S18.8838,10.0039,19.0469,10.1406z M18.5,20.3359v-5.9863l-6.6113,6.6113h5.9863
+              c0.1689,0,0.3154-0.0625,0.4395-0.1855S18.5,20.5059,18.5,20.3359z M26,20.3359c0,0.1699-0.0615,0.3164-0.1855,0.4395
+              s-0.2705,0.1855-0.4395,0.1855s-0.3125-0.0586-0.4297-0.1758l-3.1641-3.0176c-0.2471-0.2344-0.4395-0.5098-0.5762-0.8252
+              C21.0684,16.6265,21,16.2993,21,15.9609s0.0684-0.6655,0.2051-0.9814s0.3291-0.5908,0.5762-0.8252l3.1641-3.0176
+              c0.1172-0.1172,0.2607-0.1758,0.4297-0.1758s0.3154,0.062,0.4395,0.1855S26,11.4165,26,11.5859V20.3359z M24.75,18.8711v-5.8203
+              l-2.1094,2.0117c-0.124,0.1108-0.2197,0.2456-0.2881,0.4053S22.25,15.7915,22.25,15.9609s0.0342,0.3335,0.1025,0.4932
+              s0.1641,0.2944,0.2881,0.4053L24.75,18.8711z"
+    />
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/default/components/Icon/svg/icons/callMicrophone.tsx b/src/themes/default/components/Icon/svg/icons/callMicrophone.tsx
new file mode 100644
index 0000000000..0647f2f9ef
--- /dev/null
+++ b/src/themes/default/components/Icon/svg/icons/callMicrophone.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg role="presentation" viewBox="0 0 40 40">
+    <path
+      d="M27.5,20.0002441c0,1.2558594-0.3085938,2.4482422-0.9277344,3.5742188
+            c-0.2988281,0.5341797-0.65625,1.0253906-1.0742188,1.4746094c-0.4160156,0.4492188-0.8789062,0.8466797-1.3867188,1.1914062
+            c-0.5136719,0.3447266-1.0664062,0.6230469-1.6552734,0.8349609s-1.1992188,0.34375-1.8310547,0.3955078v1.9042969
+            c0,0.1689453-0.0615234,0.3154297-0.1855469,0.4394531C20.3164062,29.9387207,20.1699219,30.0002441,20,30.0002441
+            c-0.1694336,0-0.315918-0.0615234-0.4394531-0.1855469S19.375,29.5441895,19.375,29.3752441v-1.9042969
+            c-0.6313477-0.0517578-1.2416992-0.1835938-1.8310547-0.3955078s-1.1411133-0.4902344-1.6552734-0.8349609
+            c-0.5078125-0.3447266-0.9702148-0.7441406-1.3867188-1.1962891s-0.7714844-0.9423828-1.0644531-1.4697266
+            c-0.2993164-0.5400391-0.5307617-1.1132812-0.6933594-1.71875S12.5,20.6311035,12.5,20.0002441
+            c0-0.1699219,0.0620117-0.3164062,0.1855469-0.4399414s0.2700195-0.1855469,0.4394531-0.1855469
+            s0.315918,0.0620117,0.4394531,0.1855469S13.75,19.8303223,13.75,20.0002441c0,1.1191406,0.2866211,2.1650391,0.859375,3.1347656
+            c0.2734375,0.4619141,0.6020508,0.8857422,0.9863281,1.2695312s0.8071289,0.7128906,1.2695312,0.9863281
+            c0.9702148,0.5732422,2.0151367,0.859375,3.1347656,0.859375c1.1201172,0,2.1650391-0.2861328,3.1347656-0.859375
+            c0.4628906-0.2734375,0.8867188-0.6025391,1.2695312-0.9863281c0.3847656-0.3837891,0.7128906-0.8076172,0.9863281-1.2695312
+            C25.9648438,22.1652832,26.25,21.1193848,26.25,20.0002441c0-0.1699219,0.0625-0.3164062,0.1855469-0.4399414
+            c0.125-0.1235352,0.2714844-0.1855469,0.4394531-0.1855469c0.1699219,0,0.3164062,0.0620117,0.4394531,0.1855469
+            C27.4394531,19.6838379,27.5,19.8303223,27.5,20.0002441z M23.75,13.7497559v6.2504883
+            c0,0.5009766-0.0976562,0.9794922-0.2929688,1.4355469c-0.1953125,0.4550781-0.4648438,0.8564453-0.8105469,1.2011719
+            c-0.3515625,0.3515625-0.7548828,0.625-1.2109375,0.8203125C20.9804688,23.6525879,20.5019531,23.7502441,20,23.7502441
+            c-0.5014648,0-0.9780273-0.0976562-1.4306641-0.2929688s-0.8544922-0.46875-1.2060547-0.8203125
+            s-0.625-0.7539062-0.8203125-1.2060547C16.3476562,20.9777832,16.25,20.5012207,16.25,20.0002441v-6.2504883
+            c0-0.5014648,0.0976562-0.9799805,0.2929688-1.4355469s0.46875-0.859375,0.8203125-1.2109375
+            c0.3452148-0.3452148,0.7456055-0.6152344,1.2011719-0.8105469S19.4985352,9.9997559,20,9.9997559
+            c0.5019531,0,0.9814453,0.0976562,1.4404297,0.2929688s0.8613281,0.465332,1.2060547,0.8105469
+            c0.3457031,0.3452148,0.6152344,0.7470703,0.8105469,1.2060547S23.75,13.248291,23.75,13.7497559z M22.5,20.0002441v-6.2504883
+            c0-0.3320312-0.0644531-0.6494141-0.1953125-0.9521484c-0.1298828-0.3027344-0.3125-0.5712891-0.546875-0.8056641
+            s-0.5029297-0.4165039-0.8056641-0.546875S20.3320312,11.2497559,20,11.2497559s-0.6494141,0.0649414-0.9521484,0.1953125
+            s-0.5712891,0.3125-0.8056641,0.546875s-0.4165039,0.5029297-0.546875,0.8056641S17.5,13.4177246,17.5,13.7497559v6.2504883
+            c0,0.3320312,0.0649414,0.6494141,0.1953125,0.9521484s0.3125,0.5712891,0.546875,0.8056641s0.5029297,0.4169922,0.8056641,0.546875
+            S19.6679688,22.5002441,20,22.5002441s0.6494141-0.0654297,0.9521484-0.1953125s0.5712891-0.3125,0.8056641-0.546875
+            s0.4169922-0.5029297,0.546875-0.8056641C22.4355469,20.6496582,22.5,20.3322754,22.5,20.0002441z"
+    />
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/default/components/Icon/svg/icons/callMicrophoneOff.tsx b/src/themes/default/components/Icon/svg/icons/callMicrophoneOff.tsx
new file mode 100644
index 0000000000..9bffeb36a1
--- /dev/null
+++ b/src/themes/default/components/Icon/svg/icons/callMicrophoneOff.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg role="presentation" viewBox="-4 -4 40 40">
+    <path
+      d="M26,6.625c0,0.1694-0.0615,0.3159-0.1855,0.4395L19.75,13.1387V16c0,0.5078-0.0996,0.9897-0.2979,1.4453
+                c-0.1982,0.4551-0.4688,0.8545-0.8105,1.1963s-0.7402,0.6123-1.1963,0.8105S16.5078,19.75,16,19.75
+                c-0.3906,0-0.7715-0.0605-1.1426-0.1807s-0.7129-0.2939-1.0254-0.5225l-1.7773,1.7871c0.5537,0.4492,1.1699,0.7969,1.8506,1.0449
+                S15.2842,22.25,16,22.25c0.5664,0,1.1152-0.0742,1.6455-0.2246s1.0273-0.3613,1.4893-0.6348s0.8857-0.6016,1.2695-0.9863
+                s0.7129-0.8066,0.9863-1.2695s0.4854-0.959,0.6348-1.4893S22.25,16.5664,22.25,16c0-0.1694,0.0615-0.3159,0.1855-0.4395
+                s0.2705-0.1855,0.4395-0.1855s0.3154,0.062,0.4395,0.1855S23.5,15.8306,23.5,16c0,0.6445-0.0811,1.2676-0.2441,1.8701
+                s-0.3926,1.1719-0.6885,1.709s-0.6523,1.0322-1.0693,1.4844s-0.8789,0.8486-1.3867,1.1865s-1.0566,0.6133-1.6455,0.8252
+                s-1.2031,0.3428-1.8408,0.3955v1.9043c0,0.1699-0.0615,0.3164-0.1855,0.4395S16.1689,26,16,26s-0.3154-0.0625-0.4395-0.1855
+                s-0.1855-0.2695-0.1855-0.4395v-1.9141c-0.7744-0.0645-1.5215-0.248-2.2412-0.5469s-1.375-0.6992-1.9678-1.2012l-4.1016,4.1016
+                C6.9404,25.9375,6.7939,26,6.625,26s-0.3154-0.0625-0.4395-0.1855S6,25.5449,6,25.375s0.0615-0.3164,0.1855-0.4395l18.75-18.75
+                C25.0596,6.062,25.2061,6,25.375,6s0.3154,0.062,0.4395,0.1855S26,6.4556,26,6.625z M10.4336,18.8125l-0.9277,0.918
+                c-0.3252-0.5664-0.5742-1.166-0.7471-1.7969S8.5,16.6577,8.5,16c0-0.1694,0.0615-0.3159,0.1855-0.4395S8.9561,15.375,9.125,15.375
+                s0.3154,0.062,0.4395,0.1855S9.75,15.8306,9.75,16c0,0.4883,0.0566,0.9702,0.1709,1.4453
+                C10.0352,17.9199,10.2061,18.377,10.4336,18.8125z M19.7305,9.5059L18.5,10.7363V9.75c0-0.3384-0.0664-0.6592-0.2002-0.9619
+                s-0.3145-0.5679-0.542-0.7959s-0.4932-0.4087-0.7959-0.542S16.3389,7.25,16,7.25s-0.6592,0.0669-0.9619,0.2002
+                s-0.5684,0.314-0.7959,0.542s-0.4082,0.4932-0.542,0.7959S13.5,9.4116,13.5,9.75v5.9863l-1.1328,1.1426
+                C12.2891,16.5991,12.25,16.3062,12.25,16V9.75c0-0.5078,0.0996-0.9897,0.2979-1.4453s0.4688-0.8545,0.8105-1.1963
+                s0.7402-0.6118,1.1963-0.8105S15.4922,6,16,6c0.4883,0,0.9502,0.0913,1.3867,0.2734s0.8232,0.4331,1.1621,0.752
+                s0.6123,0.6899,0.8203,1.1133S19.6982,9.0176,19.7305,9.5059z M18.5,16v-1.6113l-3.7695,3.7598
+                c0.1885,0.1113,0.3926,0.1973,0.6104,0.2588S15.7783,18.5,16,18.5c0.3389,0,0.6592-0.0664,0.9619-0.2002
+                s0.5684-0.3135,0.7959-0.542s0.4082-0.4932,0.542-0.7959S18.5,16.3384,18.5,16z"
+    />
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/default/components/Icon/svg/icons/index.ts b/src/themes/default/components/Icon/svg/icons/index.ts
new file mode 100644
index 0000000000..3298f956ec
--- /dev/null
+++ b/src/themes/default/components/Icon/svg/icons/index.ts
@@ -0,0 +1,27 @@
+import { TeamsSvgIconSpec } from '../types'
+
+import call from './call'
+import callEnd from './callEnd'
+import callVideo from './callIncomingVideo'
+import callVideoOff from './callIncomingVideoOff'
+import callStartPresenting from './callControlPresentNew'
+import callStopPresenting from './callControlStopPresentingNew'
+import callMicrophone from './callMicrophone'
+import callMicrophoneOff from './callMicrophoneOff'
+import more from './more'
+import teamCreate from './teamCreate'
+import umbrella from './umbrella'
+
+export default {
+  call,
+  'call-end': callEnd,
+  'call-video': callVideo,
+  'call-video-off': callVideoOff,
+  'call-start-presenting': callStartPresenting,
+  'call-stop-presenting': callStopPresenting,
+  'call-microphone': callMicrophone,
+  'call-microphone-off': callMicrophoneOff,
+  more,
+  'team-create': teamCreate,
+  umbrella,
+} as { [iconName: string]: TeamsSvgIconSpec }
diff --git a/src/themes/default/components/Icon/svg/icons/more.tsx b/src/themes/default/components/Icon/svg/icons/more.tsx
new file mode 100644
index 0000000000..1b53b7481d
--- /dev/null
+++ b/src/themes/default/components/Icon/svg/icons/more.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg viewBox="0 0 32 32" role="presentation" focusable="false">
+    <g>
+      <circle cx="22" cy="16" r="2" />
+      <circle cx="16" cy="16" r="2" />
+      <circle cx="10" cy="16" r="2" />
+
+      <circle cx="22" cy="16" r="1.5" />
+      <circle cx="16" cy="16" r="1.5" />
+      <circle cx="10" cy="16" r="1.5" />
+    </g>
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/default/components/Icon/svg/icons/teamCreate.tsx b/src/themes/default/components/Icon/svg/icons/teamCreate.tsx
new file mode 100644
index 0000000000..e96ff59678
--- /dev/null
+++ b/src/themes/default/components/Icon/svg/icons/teamCreate.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg viewBox="0 0 32 32" role="presentation" focusable="false">
+    <g>
+      <path
+        d="M10,11c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S11.1,11,10,11z M10,14c-0.6,0-1-0.4-1-1s0.4-1,1-1s1,0.4,1,1S10.6,14,10,14zM16,14c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S14.9,14,16,14z M16,11c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S15.4,11,16,11zM13,20c0,1.3,1.2,2,3,2c1.9,0,3-0.7,3-2v-5h-6V20z M14,16h4v4c0,1-1.7,1.1-2,1.1S14,21,14,20V16zM11.5,17c0.3,0,0.5-0.2,0.5-0.5c0-0.3-0.2-0.5-0.5-0.5H8v3c0,1.3,1.1,2,3,2h0.5c0.3,0,0.5-0.2,0.5-0.5
+                c0-0.3-0.2-0.5-0.5-0.5H11C10.7,20,9,20,9,19v-2H11.5zM23.5,10H22V8.5C22,8.2,21.8,8,21.5,8S21,8.2,21,8.5V10h-1.5c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5H21v1.5
+                c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V11h1.5c0.3,0,0.5-0.2,0.5-0.5S23.8,10,23.5,10z"
+      />
+      <path
+        d="M10,11c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S11.1,11,10,11z
+                M16,14c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S14.9,14,16,14z
+                M11.5,16H8v3c0,1.3,1.1,2,3,2h0.5c0.3,0,0.5-0.2,0.5-0.5v-4C12,16.2,11.8,16,11.5,16z
+                M13,20c0,1.3,1.2,2,3,2c1.9,0,3-0.7,3-2v-5h-6V20z
+                M23.5,10H22V8.5C22,8.2,21.8,8,21.5,8S21,8.2,21,8.5V10h-1.5c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5H21v1.5
+                c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V11h1.5c0.3,0,0.5-0.2,0.5-0.5S23.8,10,23.5,10z"
+      />
+    </g>
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/default/components/Icon/svg/icons/umbrella.tsx b/src/themes/default/components/Icon/svg/icons/umbrella.tsx
new file mode 100644
index 0000000000..1f3801584d
--- /dev/null
+++ b/src/themes/default/components/Icon/svg/icons/umbrella.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default {
+  icon: ({ classes }) => (
+    <svg className={classes.svg} viewBox="0 0 34 34">
+      <path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291 0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0 0.547 0.444 0.991 1 0.991 0.552 0 1-0.451 1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825 15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224 0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z" />
+    </svg>
+  ),
+  styles: {
+    svg: ({ variables: v }) => ({
+      fill: v.color,
+    }),
+  },
+} as TeamsSvgIconSpec
diff --git a/src/themes/default/components/Icon/svg/index.ts b/src/themes/default/components/Icon/svg/index.ts
new file mode 100644
index 0000000000..30bc887b4b
--- /dev/null
+++ b/src/themes/default/components/Icon/svg/index.ts
@@ -0,0 +1,19 @@
+import svgIconsAndStyles from './icons'
+import { SvgIconSpecWithStyles, TeamsSvgIconSpec } from './types'
+
+export const getStyle = partName => {
+  return args => {
+    const { props } = args
+
+    const maybeIconSpec = svgIconsAndStyles[props.name]
+    const maybeIconStyles = maybeIconSpec && (maybeIconSpec as SvgIconSpecWithStyles).styles
+
+    if (maybeIconStyles && maybeIconStyles[partName]) {
+      return maybeIconStyles[partName](args)
+    }
+
+    return undefined
+  }
+}
+
+export default svgIconsAndStyles as { [iconName: string]: TeamsSvgIconSpec }
diff --git a/src/themes/default/components/Icon/svg/types.d.ts b/src/themes/default/components/Icon/svg/types.d.ts
new file mode 100644
index 0000000000..6f2c2415c6
--- /dev/null
+++ b/src/themes/default/components/Icon/svg/types.d.ts
@@ -0,0 +1,10 @@
+import { ComponentPartStyleFunction, SvgIconSpec } from '../../../../../../types/theme'
+import { ObjectOf } from '../../../../../../types/utils'
+import { IIconProps } from '../../../../../components/Icon/Icon'
+
+type SvgIconSpecWithStyles = {
+  icon: SvgIconSpec
+  styles: ObjectOf<ComponentPartStyleFunction<IIconProps, any>>
+}
+
+export type TeamsSvgIconSpec = SvgIconSpec | SvgIconSpecWithStyles
diff --git a/src/themes/default/fontFaces.ts b/src/themes/default/fontFaces.ts
new file mode 100644
index 0000000000..b09ad7cc05
--- /dev/null
+++ b/src/themes/default/fontFaces.ts
@@ -0,0 +1,21 @@
+import { FontFaces } from '../../../types/theme'
+
+const fontFaces: FontFaces = [
+  {
+    name: 'Segoe UI',
+    paths: ['public/fonts/segoe-ui-regular.woff2'],
+    style: { fontWeight: 400 },
+  },
+  {
+    name: 'Segoe UI',
+    paths: ['public/fonts/segoe-ui-semibold.woff2'],
+    style: { fontWeight: 600 },
+  },
+  {
+    name: 'Segoe UI',
+    paths: ['public/fonts/segoe-ui-bold.woff2'],
+    style: { fontWeight: 700 },
+  },
+]
+
+export default fontFaces
diff --git a/src/themes/default/index.ts b/src/themes/default/index.ts
new file mode 100644
index 0000000000..ce2ff37b26
--- /dev/null
+++ b/src/themes/default/index.ts
@@ -0,0 +1,48 @@
+import {
+  FontIconSpec,
+  IThemeInput,
+  SvgIconSpec,
+  ThemeIcons,
+  ThemeIconSpec,
+} from '../../../types/theme'
+
+import * as siteVariables from './siteVariables'
+import * as componentVariables from './componentVariables'
+import * as componentStyles from './componentStyles'
+import fontFaces from './fontFaces'
+
+import { default as svgIconsAndStyles } from './components/Icon/svg'
+import { default as fontIcons } from './components/Icon/font'
+
+import { SvgIconSpecWithStyles, TeamsSvgIconSpec } from './components/Icon/svg/types'
+
+const declareSvg = (svgIcon: SvgIconSpec): ThemeIconSpec => ({
+  isSvg: true,
+  icon: svgIcon,
+})
+
+const declareFontBased = (fontIcon: FontIconSpec): ThemeIconSpec => ({ icon: fontIcon })
+
+const icons: ThemeIcons = Object.keys(svgIconsAndStyles as {
+  [iconName: string]: TeamsSvgIconSpec
+}).reduce<ThemeIcons>((accIcons, iconName) => {
+  const iconAndMaybeStyles = svgIconsAndStyles[iconName]
+
+  const icon: SvgIconSpec = (iconAndMaybeStyles as any).styles
+    ? (iconAndMaybeStyles as SvgIconSpecWithStyles).icon
+    : (iconAndMaybeStyles as SvgIconSpec)
+
+  return { ...accIcons, ...{ [iconName]: declareSvg(icon) } }
+}, {})
+
+Object.keys(fontIcons).forEach(iconName => {
+  icons[iconName] = declareFontBased(fontIcons[iconName])
+})
+
+export default {
+  siteVariables,
+  componentVariables,
+  componentStyles,
+  fontFaces,
+  icons,
+} as IThemeInput
diff --git a/src/themes/default/siteVariables.ts b/src/themes/default/siteVariables.ts
new file mode 100644
index 0000000000..9b383707f5
--- /dev/null
+++ b/src/themes/default/siteVariables.ts
@@ -0,0 +1,93 @@
+import { pxToRem } from '../../lib'
+
+//
+// VARIABLES
+//
+export const htmlFontSize = '10px' // what 1rem represents
+
+//
+// COLORS
+//
+export const black = '#252423'
+export const gray02 = '#484644'
+export const gray03 = '#605E5C'
+export const gray04 = '#979593'
+export const gray06 = '#C8C6C4'
+export const gray08 = '#E1DFDD'
+export const gray09 = '#EDEBE9'
+export const gray10 = '#F3F2F1'
+export const gray14 = '#FAF9F8'
+export const fontBlack = black
+
+export const white = '#FFF'
+
+export const brand = '#2264A7'
+export const brand02 = '#33344A'
+export const brand04 = '#464775'
+export const brand06 = '#2264A7'
+export const brand08 = '#228CC7'
+export const brand12 = '#22BDE6'
+export const brand14 = '#22E2F6'
+export const brand16 = '#22F4FC'
+
+export const orange04 = '#CC4A31'
+export const magenta = '#B24782'
+export const orchid = '#943670'
+export const red = '#C4314B'
+export const red08 = '#F3D6DB'
+export const yellow = '#F8D22A'
+export const green = '#92C353'
+export const green04 = '#237b4b'
+
+//
+// FONT SIZES
+//
+export const fontSizeX4 = pxToRem(72)
+export const fontSizeX3 = pxToRem(48)
+export const fontSizeX2 = pxToRem(36)
+export const fontSizeExtraLarge = pxToRem(24)
+export const fontSizeLarge = pxToRem(18)
+export const fontSizeMedium = pxToRem(14)
+export const fontSizeSmall = pxToRem(12)
+export const fontSizeExtraSmall = pxToRem(10)
+
+//
+// STATUS COLORS
+//
+export const successStatusBackgroundColor = green
+export const successStatusTextColor = white
+export const infoStatusBackgroundColor = 'blue'
+export const infoStatusTextColor = white
+export const warningStatusBackgroundColor = yellow
+export const warningStatusTextColor = white
+export const errorStatusBackgroundColor = red
+export const errorStatusTextColor = white
+export const unknownStatusBackgroundColor = gray04
+export const unknownStatusTextColor = white
+
+//
+// FONT WEIGHTS
+//
+export const fontWeightLight = 200
+export const fontWeightSemilight = 300
+export const fontWeightRegular = 400
+export const fontWeightSemibold = 600
+export const fontWeightBold = 700
+
+//
+// LINE HEIGHTS
+//
+export const lineHeightBase = 1.4286
+export const lineHeightSmall = 1.3333
+export const lineHeightExtraSmall = 1.2
+
+//
+// SEMANTIC ASSIGNMENTS
+//
+export const bodyPadding = 0
+export const bodyMargin = 0
+export const bodyFontFamily =
+  '"Segoe UI", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif'
+export const bodyFontSize = '1.4rem'
+export const bodyColor = black
+export const bodyLineHeight = lineHeightBase
diff --git a/src/themes/index.ts b/src/themes/index.ts
index 91c945c79c..c0dabee7c2 100644
--- a/src/themes/index.ts
+++ b/src/themes/index.ts
@@ -1,2 +1,3 @@
 // Themes
 export { default as teams } from './teams'
+export { default as stardust } from './default'

From f15bbf9d285751911ec85677e971424825b38ddf Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 26 Sep 2018 13:05:27 +0200
Subject: [PATCH 02/23] -added docs page theme switcher

---
 build/tsconfig.docs.json                      |  3 +-
 .../ComponentExample/ComponentExample.tsx     | 77 ++++++++-----------
 docs/src/components/Sidebar/Sidebar.tsx       | 44 ++++++++++-
 docs/src/data/models.ts                       | 12 +++
 docs/src/data/theme-manager.ts                | 24 ++++++
 docs/src/index.tsx                            | 21 +----
 docs/src/routes.tsx                           | 60 +++++++++++----
 package.json                                  |  2 +
 yarn.lock                                     | 13 +++-
 9 files changed, 174 insertions(+), 82 deletions(-)
 create mode 100644 docs/src/data/models.ts
 create mode 100644 docs/src/data/theme-manager.ts

diff --git a/build/tsconfig.docs.json b/build/tsconfig.docs.json
index 02ea804b83..8daa326c28 100644
--- a/build/tsconfig.docs.json
+++ b/build/tsconfig.docs.json
@@ -2,7 +2,8 @@
   "extends": "./tsconfig.common.json",
   "compilerOptions": {
     "module": "esnext",
-    "allowSyntheticDefaultImports": true    
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true
   },
   "include": [
     "../src",
diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index f96297a3b5..8059c25c8e 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -5,7 +5,7 @@ import { RouteComponentProps, withRouter } from 'react-router'
 import { renderToStaticMarkup } from 'react-dom/server'
 import { html } from 'js-beautify'
 import * as copyToClipboard from 'copy-to-clipboard'
-import { Divider, Dropdown, Form, Grid, Menu, Segment, Visibility } from 'semantic-ui-react'
+import { Divider, Form, Grid, Menu, Segment, Visibility } from 'semantic-ui-react'
 import { Provider, themes } from '@stardust-ui/react'
 
 import {
@@ -23,19 +23,21 @@ import ComponentExampleTitle from './ComponentExampleTitle'
 import ContributionPrompt from '../ContributionPrompt'
 import getSourceCodeManager, { ISourceCodeManager, SourceCodeType } from './SourceCodeManager'
 import { IThemeInput, IThemePrepared } from 'types/theme'
-import Text from '../../../../../src/components/Text/Text'
+import { inject, observer } from 'mobx-react'
+import { ThemeManager } from '../../../data/theme-manager'
+import { AppStateStore } from '../../../data/models'
 
 export interface IComponentExampleProps extends RouteComponentProps<any, any> {
   title: string
   description: string
   examplePath: string
   suiVersion?: string
+  themeStore?: ThemeManager
 }
 
 interface IComponentExampleState {
   knobs: Object
-  themeName: string
-  theme: IThemeInput
+  componentVariables: Object
   exampleElement?: JSX.Element
   handleMouseLeave?: () => void
   handleMouseMove?: () => void
@@ -64,6 +66,10 @@ const codeTypeApiButtonLabels: { [key in SourceCodeType]: string } = {
  * Renders a `component` and the raw `code` that produced it.
  * Allows toggling the the raw `code` code block.
  */
+@inject((appState: AppStateStore) => ({
+  themeStore: appState.themeStore,
+}))
+@observer
 class ComponentExample extends React.PureComponent<IComponentExampleProps, IComponentExampleState> {
   private componentRef: React.Component
   private sourceCodeMgr: ISourceCodeManager
@@ -73,8 +79,7 @@ class ComponentExample extends React.PureComponent<IComponentExampleProps, IComp
 
   public state: IComponentExampleState = {
     knobs: {},
-    themeName: 'teams',
-    theme: themes.teams,
+    componentVariables: {},
     sourceCode: '',
     markup: '',
     showCode: false,
@@ -98,6 +103,7 @@ class ComponentExample extends React.PureComponent<IComponentExampleProps, IComp
     match: PropTypes.object.isRequired,
     suiVersion: PropTypes.string,
     title: PropTypes.node,
+    themeStore: PropTypes.any,
   }
 
   public componentWillMount() {
@@ -119,6 +125,8 @@ class ComponentExample extends React.PureComponent<IComponentExampleProps, IComp
 
   public componentWillReceiveProps(nextProps: IComponentExampleProps) {
     // deactivate examples when switching from one to the next
+    // TODO figure out when this should be invoked!
+    this.renderSourceCode()
     if (
       this.isActiveHash() &&
       this.isActiveState() &&
@@ -349,11 +357,15 @@ class ComponentExample extends React.PureComponent<IComponentExampleProps, IComp
   private getDisplayName = () => this.props.examplePath.split('/')[1]
 
   private renderWithProvider(ExampleComponent) {
-    const { showRtl, theme } = this.state
+    const { showRtl, componentVariables } = this.state
+    const {
+      themeStore: { themeName },
+    } = this.props
+    const theme = themes[themeName]
 
     const newTheme: IThemeInput = {
       ...theme,
-      componentVariables: theme.componentVariables,
+      componentVariables,
       rtl: showRtl,
     }
 
@@ -531,43 +543,17 @@ class ComponentExample extends React.PureComponent<IComponentExampleProps, IComp
     )
   }
 
-  private handleThemeChange = (event: React.SyntheticEvent, data: any) => {
-    this.setState({ theme: themes[data.value], themeName: data.value }, () => {
-      this.renderSourceCode()
-      this.renderVariables()
-    })
-  }
-
   private renderVariables = () => {
-    const { showVariables, themeName } = this.state
+    const { showVariables } = this.state
     if (!showVariables) return undefined
 
     const displayName = this.getDisplayName()
 
-    const themeOptions = Object.keys(themes).map(key => ({
-      text: key,
-      value: key,
-    }))
-
     return (
       <div>
         <Divider inverted horizontal>
           <span style={{ opacity: 0.5 }}>Theme</span>
         </Divider>
-        <Form inverted widths="equal" style={{ padding: '1rem' }}>
-          <Text styles={{ color: 'white' }} important>
-            Theme
-          </Text>
-          <Dropdown
-            placeholder="Select Theme"
-            fluid
-            inverted
-            selection
-            defaultValue={themeName}
-            options={themeOptions}
-            onChange={this.handleThemeChange}
-          />
-        </Form>
         <Provider.Consumer
           render={({ siteVariables, componentVariables }: IThemePrepared) => {
             const variables = componentVariables[displayName]
@@ -608,19 +594,20 @@ class ComponentExample extends React.PureComponent<IComponentExampleProps, IComp
   }
 
   private handleVariableChange = (component, variable) => (e, { value }) => {
+    const {
+      themeStore: { themeName },
+    } = this.props
+    const theme = themes[themeName]
     this.setState(
-      state => ({
-        theme: {
-          ...state.theme,
-          componentVariables: {
-            ...state.theme.componentVariables,
-            [component]: {
-              ...(state.theme.componentVariables && state.theme.componentVariables[component]),
-              [variable]: value,
-            },
+      {
+        componentVariables: {
+          ...theme.componentVariables,
+          [component]: {
+            ...(theme.componentVariables && theme.componentVariables[component]),
+            [variable]: value,
           },
         },
-      }),
+      },
       this.renderSourceCode,
     )
   }
diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx
index b296aa95e2..bca70aad64 100644
--- a/docs/src/components/Sidebar/Sidebar.tsx
+++ b/docs/src/components/Sidebar/Sidebar.tsx
@@ -5,10 +5,13 @@ import * as React from 'react'
 import { findDOMNode } from 'react-dom'
 import { NavLink } from 'react-router-dom'
 import { withRouter } from 'react-router'
-import { Menu, Icon, Input as SemanticUIInput } from 'semantic-ui-react'
+import { Dropdown, Form, Icon, Input as SemanticUIInput, Menu } from 'semantic-ui-react'
+import { inject, observer } from 'mobx-react'
 
 import Logo from 'docs/src/components/Logo/Logo'
-import { getComponentPathname, typeOrder, repoURL } from 'docs/src/utils'
+import { getComponentPathname, repoURL, typeOrder } from 'docs/src/utils'
+import { themes } from '@stardust-ui/react'
+import { AppStateStore } from '../../data/models'
 
 const pkg = require('../../../../package.json')
 const componentMenu = require('docs/src/componentMenu')
@@ -18,12 +21,17 @@ const selectedItemLabelStyle: any = { color: '#35bdb2', float: 'right' }
 const selectedItemLabel = <span style={selectedItemLabelStyle}>Press Enter</span>
 type ComponentMenuItem = { displayName: string; type: string }
 
+@inject((appState: AppStateStore) => ({
+  themeStore: appState.themeStore,
+}))
+@observer
 class Sidebar extends React.Component<any, any> {
   static propTypes = {
     match: PropTypes.object.isRequired,
     location: PropTypes.object.isRequired,
     history: PropTypes.object.isRequired,
     style: PropTypes.object,
+    themeStore: PropTypes.any,
   }
   state: any = { query: '' }
   _searchInput: any
@@ -163,8 +171,17 @@ class Sidebar extends React.Component<any, any> {
     return <Menu.Menu>{menuItems}</Menu.Menu>
   }
 
+  private handleThemeChange = (event: React.SyntheticEvent, data: any) => {
+    const { themeStore } = this.props
+    const themeName = data.value
+    themeStore.changeTheme(themeName)
+  }
+
   render() {
-    const { style } = this.props
+    const {
+      style,
+      themeStore: { themeName },
+    } = this.props
     const { query } = this.state
     return (
       <Menu vertical fixed="left" inverted style={{ ...style }}>
@@ -190,6 +207,20 @@ class Sidebar extends React.Component<any, any> {
             </Menu.Item>
           </Menu.Menu>
         </Menu.Item>
+        <Menu.Item style={{ padding: '0px' }}>
+          <Form inverted widths="equal">
+            <Dropdown
+              placeholder="Select theme..."
+              fluid
+              inverted
+              selection
+              defaultValue={themeName}
+              options={this.getThemeOptions()}
+              onChange={this.handleThemeChange}
+              style={{ borderRadius: '0px' }}
+            />
+          </Form>
+        </Menu.Item>
         <Menu.Item as={NavLink} exact to="/" activeClassName="active">
           Introduction
         </Menu.Item>
@@ -221,6 +252,13 @@ class Sidebar extends React.Component<any, any> {
       </Menu>
     )
   }
+
+  private getThemeOptions = () => {
+    return Object.keys(themes).map(key => ({
+      text: key,
+      value: key,
+    }))
+  }
 }
 
 export default withRouter(Sidebar)
diff --git a/docs/src/data/models.ts b/docs/src/data/models.ts
new file mode 100644
index 0000000000..c17eaa7705
--- /dev/null
+++ b/docs/src/data/models.ts
@@ -0,0 +1,12 @@
+import { ThemeManager } from './theme-manager'
+
+export class AppStateStore {
+  public readonly name = 'app-state-store'
+  public readonly themeStore: ThemeManager
+
+  constructor() {
+    this.themeStore = new ThemeManager()
+  }
+}
+
+export default () => new AppStateStore()
diff --git a/docs/src/data/theme-manager.ts b/docs/src/data/theme-manager.ts
new file mode 100644
index 0000000000..9a3d602738
--- /dev/null
+++ b/docs/src/data/theme-manager.ts
@@ -0,0 +1,24 @@
+import { action, configure, observable } from 'mobx'
+
+configure({
+  enforceActions: true,
+})
+
+export interface IThemeManagerManager {
+  themeName: string
+
+  changeTheme(newThemeName: string): void
+}
+
+export class ThemeManager implements IThemeManagerManager {
+  @observable public themeName: string
+
+  @action
+  public changeTheme(newThemeName: string): void {
+    this.themeName = newThemeName
+  }
+
+  constructor() {
+    this.themeName = 'teams'
+  }
+}
diff --git a/docs/src/index.tsx b/docs/src/index.tsx
index 0fbdf3ff37..0005469e61 100644
--- a/docs/src/index.tsx
+++ b/docs/src/index.tsx
@@ -2,13 +2,10 @@ import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import { AppContainer } from 'react-hot-loader'
 
-// TODO make themes a monorepo of packages
-import { Provider, themes } from '@stardust-ui/react'
+import { Provider } from 'mobx-react'
 
 import Router from './routes'
-import { mergeThemes } from '../../src/lib'
-
-import { semanticCssOverrides } from './Style'
+import createAppStateStore from './data/models'
 
 // ----------------------------------------
 // Rendering
@@ -17,22 +14,12 @@ import { semanticCssOverrides } from './Style'
 const mountNode = document.createElement('div')
 document.body.appendChild(mountNode)
 
-const semanticStyleOverrides = {
-  staticStyles: [semanticCssOverrides],
-}
+const appStateStore = createAppStateStore()
 
 const render = NewApp =>
   ReactDOM.render(
     <AppContainer>
-      <Provider
-        theme={mergeThemes(semanticStyleOverrides, themes.teams, {
-          // adjust Teams' theme to Semantic UI's font size scheme
-          siteVariables: {
-            htmlFontSize: '14px',
-            bodyFontSize: '1rem',
-          },
-        })}
-      >
+      <Provider {...appStateStore}>
         <NewApp />
       </Provider>
     </AppContainer>,
diff --git a/docs/src/routes.tsx b/docs/src/routes.tsx
index b327c1dcde..b2d5218828 100644
--- a/docs/src/routes.tsx
+++ b/docs/src/routes.tsx
@@ -10,21 +10,51 @@ import PageNotFound from './views/PageNotFound'
 import QuickStart from './views/QuickStart'
 import Accessibility from './views/Accessibility'
 import Theming from './views/Theming'
+import { Provider, themes } from '@stardust-ui/react'
 
-const Router = () => (
-  <BrowserRouter basename={__BASENAME__}>
-    <Switch>
-      <Route exact path="/maximize/:exampleName" component={ExternalExampleLayout} />
-      <Switch>
-        <DocsLayout exact path="/" component={Introduction} />
-        <DocsLayout exact path="/:type/:name" component={DocsRoot} sidebar />
-        <DocsLayout exact path="/quick-start" component={QuickStart} />
-        <DocsLayout exact path="/accessibility" component={Accessibility} />
-        <DocsLayout exact path="/theming" component={Theming} />
-        <DocsLayout exact path="/*" component={PageNotFound} />
-      </Switch>
-    </Switch>
-  </BrowserRouter>
-)
+import { mergeThemes } from '../../src/lib'
+import { semanticCssOverrides } from './Style'
+import { inject, observer } from 'mobx-react'
+import { AppStateStore } from './data/models'
+
+const semanticStyleOverrides = {
+  staticStyles: [semanticCssOverrides],
+}
+
+@inject((appState: AppStateStore) => ({
+  themeStore: appState.themeStore,
+}))
+@observer
+class Router extends React.Component<any, any> {
+  render() {
+    const { themeStore } = this.props
+    const theme = themes[themeStore.themeName]
+    return (
+      <Provider
+        theme={mergeThemes(semanticStyleOverrides, themes.teams, theme, {
+          // adjust Teams' theme to Semantic UI's font size scheme
+          siteVariables: {
+            htmlFontSize: '14px',
+            bodyFontSize: '1rem',
+          },
+        })}
+      >
+        <BrowserRouter basename={__BASENAME__}>
+          <Switch>
+            <Route exact path="/maximize/:exampleName" component={ExternalExampleLayout} />
+            <Switch>
+              <DocsLayout exact path="/" component={Introduction} />
+              <DocsLayout exact path="/:type/:name" component={DocsRoot} sidebar />
+              <DocsLayout exact path="/quick-start" component={QuickStart} />
+              <DocsLayout exact path="/accessibility" component={Accessibility} />
+              <DocsLayout exact path="/theming" component={Theming} />
+              <DocsLayout exact path="/*" component={PageNotFound} />
+            </Switch>
+          </Switch>
+        </BrowserRouter>
+      </Provider>
+    )
+  }
+}
 
 export default Router
diff --git a/package.json b/package.json
index 1de32ff51e..815aa4a9f2 100644
--- a/package.json
+++ b/package.json
@@ -88,6 +88,8 @@
     "fela-plugin-rtl": "^1.0.6",
     "keyboard-key": "^1.0.1",
     "lodash": "^4.17.10",
+    "mobx": "^5.1.2",
+    "mobx-react": "^5.2.8",
     "prop-types": "^15.6.1",
     "react-fela": "^7.2.0",
     "react-popper": "^1.0.2",
diff --git a/yarn.lock b/yarn.lock
index 59ceb80728..3786017e17 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5414,6 +5414,17 @@ mkpath@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/mkpath/-/mkpath-0.1.0.tgz#7554a6f8d871834cc97b5462b122c4c124d6de91"
 
+mobx-react@^5.2.8:
+  version "5.2.8"
+  resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-5.2.8.tgz#059c7f29254d7cd36e103d79113103b40348d3bf"
+  dependencies:
+    hoist-non-react-statics "^2.5.0"
+    react-lifecycles-compat "^3.0.2"
+
+mobx@^5.1.2:
+  version "5.1.2"
+  resolved "https://registry.yarnpkg.com/mobx/-/mobx-5.1.2.tgz#5a3a0bc381ba155901e33eabe492c3c7482e8b35"
+
 moment@2.x.x:
   version "2.22.2"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
@@ -6529,7 +6540,7 @@ react-is@^16.4.1:
   version "16.4.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"
 
-react-lifecycles-compat@^3.0.4:
+react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
 

From c094e362a41582e52abe4aa67866c8106913280c Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 26 Sep 2018 14:50:05 +0200
Subject: [PATCH 03/23] -added examples for teams dark and teams high contrast
 themes

---
 docs/src/components/Sidebar/Sidebar.tsx       |    2 +-
 .../Button/Types/ButtonExample.shorthand.tsx  |   12 +-
 src/themes/default/fontFaces.ts               |   21 -
 src/themes/index.ts                           |    3 +-
 .../componentStyles.ts                        |    2 +
 .../componentVariables.ts                     |    2 +
 .../components/Button/buttonGroupStyles.ts    |    0
 .../components/Button/buttonStyles.ts         |    0
 .../components/Button/buttonVariables.ts      |    8 +-
 .../components/Icon/font/index.ts             |    0
 .../components/Icon/fontAwesomeIconStyles.ts  |    0
 .../components/Icon/iconStyles.ts             |    0
 .../components/Icon/iconVariables.ts          |    0
 .../components/Icon/svg/icons/call.tsx        |    0
 .../Icon/svg/icons/callControlPresentNew.tsx  |    0
 .../icons/callControlStopPresentingNew.tsx    |    0
 .../components/Icon/svg/icons/callEnd.tsx     |    0
 .../Icon/svg/icons/callIncomingVideo.tsx      |    0
 .../Icon/svg/icons/callIncomingVideoOff.tsx   |    0
 .../Icon/svg/icons/callMicrophone.tsx         |    0
 .../Icon/svg/icons/callMicrophoneOff.tsx      |    0
 .../components/Icon/svg/icons/index.ts        |    0
 .../components/Icon/svg/icons/more.tsx        |    0
 .../components/Icon/svg/icons/teamCreate.tsx  |    0
 .../components/Icon/svg/icons/umbrella.tsx    |    0
 .../components/Icon/svg/index.ts              |    0
 .../components/Icon/svg/types.d.ts            |    0
 src/themes/{default => teams-dark}/index.ts   |    2 -
 .../{default => teams-dark}/siteVariables.ts  |   12 +-
 .../teams-high-contrast/componentStyles.ts    |    4 +
 .../teams-high-contrast/componentVariables.ts |    4 +
 .../components/Button/buttonGroupStyles.ts    |   32 +
 .../components/Button/buttonStyles.ts         |  205 +++
 .../components/Button/buttonVariables.ts      |   79 +
 .../components/Icon/font/index.ts             |   11 +
 .../components/Icon/fontAwesomeIconStyles.ts  | 1304 +++++++++++++++++
 .../components/Icon/iconStyles.ts             |  131 ++
 .../components/Icon/iconVariables.ts          |   21 +
 .../components/Icon/svg/icons/call.tsx        |   31 +
 .../Icon/svg/icons/callControlPresentNew.tsx  |   20 +
 .../icons/callControlStopPresentingNew.tsx    |   21 +
 .../components/Icon/svg/icons/callEnd.tsx     |   12 +
 .../Icon/svg/icons/callIncomingVideo.tsx      |   13 +
 .../Icon/svg/icons/callIncomingVideoOff.tsx   |   28 +
 .../Icon/svg/icons/callMicrophone.tsx         |   39 +
 .../Icon/svg/icons/callMicrophoneOff.tsx      |   30 +
 .../components/Icon/svg/icons/index.ts        |   27 +
 .../components/Icon/svg/icons/more.tsx        |   16 +
 .../components/Icon/svg/icons/teamCreate.tsx  |   22 +
 .../components/Icon/svg/icons/umbrella.tsx    |   15 +
 .../components/Icon/svg/index.ts              |   19 +
 .../components/Icon/svg/types.d.ts            |   10 +
 src/themes/teams-high-contrast/index.ts       |   46 +
 .../teams-high-contrast/siteVariables.ts      |   93 ++
 54 files changed, 2255 insertions(+), 42 deletions(-)
 delete mode 100644 src/themes/default/fontFaces.ts
 rename src/themes/{default => teams-dark}/componentStyles.ts (69%)
 rename src/themes/{default => teams-dark}/componentVariables.ts (68%)
 rename src/themes/{default => teams-dark}/components/Button/buttonGroupStyles.ts (100%)
 rename src/themes/{default => teams-dark}/components/Button/buttonStyles.ts (100%)
 rename src/themes/{default => teams-dark}/components/Button/buttonVariables.ts (93%)
 rename src/themes/{default => teams-dark}/components/Icon/font/index.ts (100%)
 rename src/themes/{default => teams-dark}/components/Icon/fontAwesomeIconStyles.ts (100%)
 rename src/themes/{default => teams-dark}/components/Icon/iconStyles.ts (100%)
 rename src/themes/{default => teams-dark}/components/Icon/iconVariables.ts (100%)
 rename src/themes/{default => teams-dark}/components/Icon/svg/icons/call.tsx (100%)
 rename src/themes/{default => teams-dark}/components/Icon/svg/icons/callControlPresentNew.tsx (100%)
 rename src/themes/{default => teams-dark}/components/Icon/svg/icons/callControlStopPresentingNew.tsx (100%)
 rename src/themes/{default => teams-dark}/components/Icon/svg/icons/callEnd.tsx (100%)
 rename src/themes/{default => teams-dark}/components/Icon/svg/icons/callIncomingVideo.tsx (100%)
 rename src/themes/{default => teams-dark}/components/Icon/svg/icons/callIncomingVideoOff.tsx (100%)
 rename src/themes/{default => teams-dark}/components/Icon/svg/icons/callMicrophone.tsx (100%)
 rename src/themes/{default => teams-dark}/components/Icon/svg/icons/callMicrophoneOff.tsx (100%)
 rename src/themes/{default => teams-dark}/components/Icon/svg/icons/index.ts (100%)
 rename src/themes/{default => teams-dark}/components/Icon/svg/icons/more.tsx (100%)
 rename src/themes/{default => teams-dark}/components/Icon/svg/icons/teamCreate.tsx (100%)
 rename src/themes/{default => teams-dark}/components/Icon/svg/icons/umbrella.tsx (100%)
 rename src/themes/{default => teams-dark}/components/Icon/svg/index.ts (100%)
 rename src/themes/{default => teams-dark}/components/Icon/svg/types.d.ts (100%)
 rename src/themes/{default => teams-dark}/index.ts (96%)
 rename src/themes/{default => teams-dark}/siteVariables.ts (92%)
 create mode 100644 src/themes/teams-high-contrast/componentStyles.ts
 create mode 100644 src/themes/teams-high-contrast/componentVariables.ts
 create mode 100644 src/themes/teams-high-contrast/components/Button/buttonGroupStyles.ts
 create mode 100644 src/themes/teams-high-contrast/components/Button/buttonStyles.ts
 create mode 100644 src/themes/teams-high-contrast/components/Button/buttonVariables.ts
 create mode 100644 src/themes/teams-high-contrast/components/Icon/font/index.ts
 create mode 100644 src/themes/teams-high-contrast/components/Icon/fontAwesomeIconStyles.ts
 create mode 100644 src/themes/teams-high-contrast/components/Icon/iconStyles.ts
 create mode 100644 src/themes/teams-high-contrast/components/Icon/iconVariables.ts
 create mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/call.tsx
 create mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/callControlPresentNew.tsx
 create mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/callControlStopPresentingNew.tsx
 create mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/callEnd.tsx
 create mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/callIncomingVideo.tsx
 create mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/callIncomingVideoOff.tsx
 create mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/callMicrophone.tsx
 create mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/callMicrophoneOff.tsx
 create mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/index.ts
 create mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/more.tsx
 create mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/teamCreate.tsx
 create mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/umbrella.tsx
 create mode 100644 src/themes/teams-high-contrast/components/Icon/svg/index.ts
 create mode 100644 src/themes/teams-high-contrast/components/Icon/svg/types.d.ts
 create mode 100644 src/themes/teams-high-contrast/index.ts
 create mode 100644 src/themes/teams-high-contrast/siteVariables.ts

diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx
index bca70aad64..b460c907f1 100644
--- a/docs/src/components/Sidebar/Sidebar.tsx
+++ b/docs/src/components/Sidebar/Sidebar.tsx
@@ -255,7 +255,7 @@ class Sidebar extends React.Component<any, any> {
 
   private getThemeOptions = () => {
     return Object.keys(themes).map(key => ({
-      text: key,
+      text: _.startCase(key),
       value: key,
     }))
   }
diff --git a/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx b/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx
index f26710779a..04e23fffb8 100644
--- a/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx
+++ b/docs/src/examples/components/Button/Types/ButtonExample.shorthand.tsx
@@ -1,13 +1,11 @@
 import React from 'react'
-import { Button, Provider, themes } from '@stardust-ui/react'
+import { Button } from '@stardust-ui/react'
 
 const ButtonExample = () => (
-  <Provider theme={themes.stardust}>
-    <>
-      <Button content="Click here" />
-      <Button content="See how this very long text shows up on the button" />
-    </>
-  </Provider>
+  <div>
+    <Button content="Click here" />
+    <Button content="See how this very long text shows up on the button" />
+  </div>
 )
 
 export default ButtonExample
diff --git a/src/themes/default/fontFaces.ts b/src/themes/default/fontFaces.ts
deleted file mode 100644
index b09ad7cc05..0000000000
--- a/src/themes/default/fontFaces.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { FontFaces } from '../../../types/theme'
-
-const fontFaces: FontFaces = [
-  {
-    name: 'Segoe UI',
-    paths: ['public/fonts/segoe-ui-regular.woff2'],
-    style: { fontWeight: 400 },
-  },
-  {
-    name: 'Segoe UI',
-    paths: ['public/fonts/segoe-ui-semibold.woff2'],
-    style: { fontWeight: 600 },
-  },
-  {
-    name: 'Segoe UI',
-    paths: ['public/fonts/segoe-ui-bold.woff2'],
-    style: { fontWeight: 700 },
-  },
-]
-
-export default fontFaces
diff --git a/src/themes/index.ts b/src/themes/index.ts
index c0dabee7c2..4dfa3d06e2 100644
--- a/src/themes/index.ts
+++ b/src/themes/index.ts
@@ -1,3 +1,4 @@
 // Themes
 export { default as teams } from './teams'
-export { default as stardust } from './default'
+export { default as teamsDark } from './teams-dark'
+export { default as teamsHighContrast } from './teams-high-contrast'
diff --git a/src/themes/default/componentStyles.ts b/src/themes/teams-dark/componentStyles.ts
similarity index 69%
rename from src/themes/default/componentStyles.ts
rename to src/themes/teams-dark/componentStyles.ts
index 4f363a9b2b..65da5ff33c 100644
--- a/src/themes/default/componentStyles.ts
+++ b/src/themes/teams-dark/componentStyles.ts
@@ -1,2 +1,4 @@
 export { default as Button } from './components/Button/buttonStyles'
 export { default as ButtonGroup } from './components/Button/buttonGroupStyles'
+
+export { default as Icon } from './components/Icon/iconStyles'
diff --git a/src/themes/default/componentVariables.ts b/src/themes/teams-dark/componentVariables.ts
similarity index 68%
rename from src/themes/default/componentVariables.ts
rename to src/themes/teams-dark/componentVariables.ts
index 6a0a975d06..c591479ea1 100644
--- a/src/themes/default/componentVariables.ts
+++ b/src/themes/teams-dark/componentVariables.ts
@@ -1,2 +1,4 @@
 export { default as Button } from './components/Button/buttonVariables'
 export { default as ButtonGroup } from './components/Button/buttonVariables'
+
+export { default as Icon } from './components/Icon/iconVariables'
diff --git a/src/themes/default/components/Button/buttonGroupStyles.ts b/src/themes/teams-dark/components/Button/buttonGroupStyles.ts
similarity index 100%
rename from src/themes/default/components/Button/buttonGroupStyles.ts
rename to src/themes/teams-dark/components/Button/buttonGroupStyles.ts
diff --git a/src/themes/default/components/Button/buttonStyles.ts b/src/themes/teams-dark/components/Button/buttonStyles.ts
similarity index 100%
rename from src/themes/default/components/Button/buttonStyles.ts
rename to src/themes/teams-dark/components/Button/buttonStyles.ts
diff --git a/src/themes/default/components/Button/buttonVariables.ts b/src/themes/teams-dark/components/Button/buttonVariables.ts
similarity index 93%
rename from src/themes/default/components/Button/buttonVariables.ts
rename to src/themes/teams-dark/components/Button/buttonVariables.ts
index 1030d46202..ae4522f070 100644
--- a/src/themes/default/components/Button/buttonVariables.ts
+++ b/src/themes/teams-dark/components/Button/buttonVariables.ts
@@ -58,12 +58,12 @@ export default (siteVars: any): IButtonVariables => {
     typePrimaryBorderColor: 'transparent',
     typePrimaryBorderColorFocus: siteVars.black,
     typePrimaryBorderColorInsetFocus: siteVars.white,
-    typeSecondaryColor: siteVars.black,
-    typeSecondaryBackgroundColor: siteVars.white,
+    typeSecondaryColor: siteVars.white,
+    typeSecondaryBackgroundColor: siteVars.black,
     typeSecondaryBackgroundColorActive: siteVars.gray08,
-    typeSecondaryBackgroundColorHover: siteVars.gray09,
+    typeSecondaryBackgroundColorHover: siteVars.brand04,
     typeSecondaryBackgroundColorFocus: siteVars.gray08,
-    typeSecondaryBorderColor: siteVars.gray08,
+    typeSecondaryBorderColor: siteVars.white,
     typeSecondaryBorderColorActive: siteVars.gray06,
     typeSecondaryBorderColorHover: siteVars.gray06,
     typeSecondaryBorderColorFocus: siteVars.black,
diff --git a/src/themes/default/components/Icon/font/index.ts b/src/themes/teams-dark/components/Icon/font/index.ts
similarity index 100%
rename from src/themes/default/components/Icon/font/index.ts
rename to src/themes/teams-dark/components/Icon/font/index.ts
diff --git a/src/themes/default/components/Icon/fontAwesomeIconStyles.ts b/src/themes/teams-dark/components/Icon/fontAwesomeIconStyles.ts
similarity index 100%
rename from src/themes/default/components/Icon/fontAwesomeIconStyles.ts
rename to src/themes/teams-dark/components/Icon/fontAwesomeIconStyles.ts
diff --git a/src/themes/default/components/Icon/iconStyles.ts b/src/themes/teams-dark/components/Icon/iconStyles.ts
similarity index 100%
rename from src/themes/default/components/Icon/iconStyles.ts
rename to src/themes/teams-dark/components/Icon/iconStyles.ts
diff --git a/src/themes/default/components/Icon/iconVariables.ts b/src/themes/teams-dark/components/Icon/iconVariables.ts
similarity index 100%
rename from src/themes/default/components/Icon/iconVariables.ts
rename to src/themes/teams-dark/components/Icon/iconVariables.ts
diff --git a/src/themes/default/components/Icon/svg/icons/call.tsx b/src/themes/teams-dark/components/Icon/svg/icons/call.tsx
similarity index 100%
rename from src/themes/default/components/Icon/svg/icons/call.tsx
rename to src/themes/teams-dark/components/Icon/svg/icons/call.tsx
diff --git a/src/themes/default/components/Icon/svg/icons/callControlPresentNew.tsx b/src/themes/teams-dark/components/Icon/svg/icons/callControlPresentNew.tsx
similarity index 100%
rename from src/themes/default/components/Icon/svg/icons/callControlPresentNew.tsx
rename to src/themes/teams-dark/components/Icon/svg/icons/callControlPresentNew.tsx
diff --git a/src/themes/default/components/Icon/svg/icons/callControlStopPresentingNew.tsx b/src/themes/teams-dark/components/Icon/svg/icons/callControlStopPresentingNew.tsx
similarity index 100%
rename from src/themes/default/components/Icon/svg/icons/callControlStopPresentingNew.tsx
rename to src/themes/teams-dark/components/Icon/svg/icons/callControlStopPresentingNew.tsx
diff --git a/src/themes/default/components/Icon/svg/icons/callEnd.tsx b/src/themes/teams-dark/components/Icon/svg/icons/callEnd.tsx
similarity index 100%
rename from src/themes/default/components/Icon/svg/icons/callEnd.tsx
rename to src/themes/teams-dark/components/Icon/svg/icons/callEnd.tsx
diff --git a/src/themes/default/components/Icon/svg/icons/callIncomingVideo.tsx b/src/themes/teams-dark/components/Icon/svg/icons/callIncomingVideo.tsx
similarity index 100%
rename from src/themes/default/components/Icon/svg/icons/callIncomingVideo.tsx
rename to src/themes/teams-dark/components/Icon/svg/icons/callIncomingVideo.tsx
diff --git a/src/themes/default/components/Icon/svg/icons/callIncomingVideoOff.tsx b/src/themes/teams-dark/components/Icon/svg/icons/callIncomingVideoOff.tsx
similarity index 100%
rename from src/themes/default/components/Icon/svg/icons/callIncomingVideoOff.tsx
rename to src/themes/teams-dark/components/Icon/svg/icons/callIncomingVideoOff.tsx
diff --git a/src/themes/default/components/Icon/svg/icons/callMicrophone.tsx b/src/themes/teams-dark/components/Icon/svg/icons/callMicrophone.tsx
similarity index 100%
rename from src/themes/default/components/Icon/svg/icons/callMicrophone.tsx
rename to src/themes/teams-dark/components/Icon/svg/icons/callMicrophone.tsx
diff --git a/src/themes/default/components/Icon/svg/icons/callMicrophoneOff.tsx b/src/themes/teams-dark/components/Icon/svg/icons/callMicrophoneOff.tsx
similarity index 100%
rename from src/themes/default/components/Icon/svg/icons/callMicrophoneOff.tsx
rename to src/themes/teams-dark/components/Icon/svg/icons/callMicrophoneOff.tsx
diff --git a/src/themes/default/components/Icon/svg/icons/index.ts b/src/themes/teams-dark/components/Icon/svg/icons/index.ts
similarity index 100%
rename from src/themes/default/components/Icon/svg/icons/index.ts
rename to src/themes/teams-dark/components/Icon/svg/icons/index.ts
diff --git a/src/themes/default/components/Icon/svg/icons/more.tsx b/src/themes/teams-dark/components/Icon/svg/icons/more.tsx
similarity index 100%
rename from src/themes/default/components/Icon/svg/icons/more.tsx
rename to src/themes/teams-dark/components/Icon/svg/icons/more.tsx
diff --git a/src/themes/default/components/Icon/svg/icons/teamCreate.tsx b/src/themes/teams-dark/components/Icon/svg/icons/teamCreate.tsx
similarity index 100%
rename from src/themes/default/components/Icon/svg/icons/teamCreate.tsx
rename to src/themes/teams-dark/components/Icon/svg/icons/teamCreate.tsx
diff --git a/src/themes/default/components/Icon/svg/icons/umbrella.tsx b/src/themes/teams-dark/components/Icon/svg/icons/umbrella.tsx
similarity index 100%
rename from src/themes/default/components/Icon/svg/icons/umbrella.tsx
rename to src/themes/teams-dark/components/Icon/svg/icons/umbrella.tsx
diff --git a/src/themes/default/components/Icon/svg/index.ts b/src/themes/teams-dark/components/Icon/svg/index.ts
similarity index 100%
rename from src/themes/default/components/Icon/svg/index.ts
rename to src/themes/teams-dark/components/Icon/svg/index.ts
diff --git a/src/themes/default/components/Icon/svg/types.d.ts b/src/themes/teams-dark/components/Icon/svg/types.d.ts
similarity index 100%
rename from src/themes/default/components/Icon/svg/types.d.ts
rename to src/themes/teams-dark/components/Icon/svg/types.d.ts
diff --git a/src/themes/default/index.ts b/src/themes/teams-dark/index.ts
similarity index 96%
rename from src/themes/default/index.ts
rename to src/themes/teams-dark/index.ts
index ce2ff37b26..47cecb488a 100644
--- a/src/themes/default/index.ts
+++ b/src/themes/teams-dark/index.ts
@@ -9,7 +9,6 @@ import {
 import * as siteVariables from './siteVariables'
 import * as componentVariables from './componentVariables'
 import * as componentStyles from './componentStyles'
-import fontFaces from './fontFaces'
 
 import { default as svgIconsAndStyles } from './components/Icon/svg'
 import { default as fontIcons } from './components/Icon/font'
@@ -43,6 +42,5 @@ export default {
   siteVariables,
   componentVariables,
   componentStyles,
-  fontFaces,
   icons,
 } as IThemeInput
diff --git a/src/themes/default/siteVariables.ts b/src/themes/teams-dark/siteVariables.ts
similarity index 92%
rename from src/themes/default/siteVariables.ts
rename to src/themes/teams-dark/siteVariables.ts
index 9b383707f5..2349303d64 100644
--- a/src/themes/default/siteVariables.ts
+++ b/src/themes/teams-dark/siteVariables.ts
@@ -21,14 +21,14 @@ export const fontBlack = black
 
 export const white = '#FFF'
 
-export const brand = '#2264A7'
+export const brand = '#6264A7'
 export const brand02 = '#33344A'
 export const brand04 = '#464775'
-export const brand06 = '#2264A7'
-export const brand08 = '#228CC7'
-export const brand12 = '#22BDE6'
-export const brand14 = '#22E2F6'
-export const brand16 = '#22F4FC'
+export const brand06 = '#6264A7'
+export const brand08 = '#8B8CC7'
+export const brand12 = '#BDBDE6'
+export const brand14 = '#E2E2F6'
+export const brand16 = '#F4F4FC'
 
 export const orange04 = '#CC4A31'
 export const magenta = '#B24782'
diff --git a/src/themes/teams-high-contrast/componentStyles.ts b/src/themes/teams-high-contrast/componentStyles.ts
new file mode 100644
index 0000000000..65da5ff33c
--- /dev/null
+++ b/src/themes/teams-high-contrast/componentStyles.ts
@@ -0,0 +1,4 @@
+export { default as Button } from './components/Button/buttonStyles'
+export { default as ButtonGroup } from './components/Button/buttonGroupStyles'
+
+export { default as Icon } from './components/Icon/iconStyles'
diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts
new file mode 100644
index 0000000000..c591479ea1
--- /dev/null
+++ b/src/themes/teams-high-contrast/componentVariables.ts
@@ -0,0 +1,4 @@
+export { default as Button } from './components/Button/buttonVariables'
+export { default as ButtonGroup } from './components/Button/buttonVariables'
+
+export { default as Icon } from './components/Icon/iconVariables'
diff --git a/src/themes/teams-high-contrast/components/Button/buttonGroupStyles.ts b/src/themes/teams-high-contrast/components/Button/buttonGroupStyles.ts
new file mode 100644
index 0000000000..e0d790cb3b
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Button/buttonGroupStyles.ts
@@ -0,0 +1,32 @@
+import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
+import { IButtonGroupProps } from '../../../../components/Button/ButtonGroup'
+
+const commonButtonsStyles = (circular: boolean) => ({
+  ...(!circular && {
+    margin: '0px',
+    borderRadius: '0px',
+  }),
+})
+
+const buttonGroupStyles: IComponentPartStylesInput<IButtonGroupProps, any> = {
+  root: (): ICSSInJSStyle => ({}),
+  middleButton: ({ props: p }) => ({
+    ...commonButtonsStyles(p.circular),
+  }),
+  firstButton: ({ props: p, variables: v }) => ({
+    ...commonButtonsStyles(p.circular),
+    ...(!p.circular && {
+      borderTopLeftRadius: v.borderRadius,
+      borderBottomLeftRadius: v.borderRadius,
+    }),
+  }),
+  lastButton: ({ props: p, variables: v }) => ({
+    ...commonButtonsStyles(p.circular),
+    ...(!p.circular && {
+      borderTopRightRadius: v.borderRadius,
+      borderBottomRightRadius: v.borderRadius,
+    }),
+  }),
+}
+
+export default buttonGroupStyles
diff --git a/src/themes/teams-high-contrast/components/Button/buttonStyles.ts b/src/themes/teams-high-contrast/components/Button/buttonStyles.ts
new file mode 100644
index 0000000000..9ba83dc444
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Button/buttonStyles.ts
@@ -0,0 +1,205 @@
+import { pxToRem } from '../../../../lib'
+import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
+import { IButtonProps } from '../../../../components/Button/Button'
+import { truncateStyle } from '../../../../styles/customCSS'
+
+const buttonStyles: IComponentPartStylesInput<IButtonProps, any> = {
+  root: ({ props, variables }): ICSSInJSStyle => {
+    const { circular, disabled, fluid, type, text, iconOnly, isFromKeyboard } = props
+    const primary = type === 'primary'
+    const secondary = type === 'secondary'
+
+    const {
+      height,
+      minWidth,
+      maxWidth,
+      borderRadius,
+      color,
+      backgroundColor,
+      backgroundColorHover,
+      circularRadius,
+      paddingLeftRightValue,
+      typeDisabledButtonColor,
+      typeDisabledButtonBackgroundColor,
+      typePrimaryColor,
+      typePrimaryBackgroundColor,
+      typePrimaryBackgroundColorActive,
+      typePrimaryBackgroundColorHover,
+      typePrimaryBackgroundColorFocus,
+      typePrimaryBorderColor,
+      typePrimaryBorderColorFocus,
+      typePrimaryBorderColorInsetFocus,
+      typeSecondaryColor,
+      typeSecondaryBackgroundColor,
+      typeSecondaryBackgroundColorActive,
+      typeSecondaryBackgroundColorHover,
+      typeSecondaryBackgroundColorFocus,
+      typeSecondaryBorderColor,
+      typeSecondaryBorderColorActive,
+      typeSecondaryBorderColorHover,
+      typeSecondaryBorderColorFocus,
+      typeSecondaryBorderColorInsetFocus,
+      typeTextColorHover,
+      typeTextPrimaryColor,
+      typeTextPrimaryColorHover,
+      typeTextSecondaryColor,
+      typeTextSecondaryColorHover,
+    } = variables
+
+    return {
+      height,
+      minWidth,
+      maxWidth,
+      color,
+      backgroundColor,
+      borderRadius,
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+      position: 'relative',
+      padding: `0 ${pxToRem(paddingLeftRightValue)}`,
+      margin: `0 ${pxToRem(8)} 0 0`,
+      verticalAlign: 'middle',
+      cursor: 'pointer',
+
+      ...(!text && {
+        borderWidth: `${secondary ? (circular ? 1 : 2) : 0}px`,
+        ':hover': {
+          backgroundColor: backgroundColorHover,
+        },
+      }),
+
+      ...(text && {
+        backgroundColor: 'transparent',
+        borderColor: 'transparent',
+        ':hover': {
+          color: typeTextColorHover,
+        },
+      }),
+
+      ...(primary &&
+        !text && {
+          color: typePrimaryColor,
+          backgroundColor: typePrimaryBackgroundColor,
+          border: `${pxToRem(1)} solid ${typePrimaryBorderColor}`,
+          ':active': {
+            backgroundColor: typePrimaryBackgroundColorActive,
+          },
+          ':hover': {
+            color: typePrimaryColor,
+            backgroundColor: typePrimaryBackgroundColorHover,
+          },
+        }),
+
+      ...(primary &&
+        !text &&
+        !circular && {
+          outline: 0,
+          ':focus': {
+            ...(isFromKeyboard && {
+              backgroundColor: typePrimaryBackgroundColorFocus,
+              borderColor: typePrimaryBorderColorFocus,
+              '::before': {
+                content: '""',
+                position: 'absolute',
+                top: '0',
+                left: '0',
+                right: '0',
+                bottom: '0',
+                border: `${pxToRem(1)} solid ${typePrimaryBorderColorInsetFocus}`,
+                borderRadius: `${pxToRem(2)}`,
+              },
+            }),
+          },
+        }),
+
+      ...(primary &&
+        text && {
+          color: typeTextPrimaryColor,
+          ':hover': {
+            color: typeTextPrimaryColorHover,
+          },
+        }),
+
+      ...(secondary &&
+        !text && {
+          color: typeSecondaryColor,
+          backgroundColor: typeSecondaryBackgroundColor,
+          borderColor: typeSecondaryBorderColor,
+          border: `${pxToRem(1)} solid ${typeSecondaryBorderColor}`,
+          ':active': {
+            backgroundColor: typeSecondaryBackgroundColorActive,
+            borderColor: typeSecondaryBorderColorActive,
+          },
+          ':hover': {
+            backgroundColor: typeSecondaryBackgroundColorHover,
+            borderColor: typeSecondaryBorderColorHover,
+          },
+        }),
+
+      ...(secondary &&
+        !text &&
+        !circular && {
+          outline: 0,
+          ':focus': {
+            ...(isFromKeyboard && {
+              backgroundColor: typeSecondaryBackgroundColorFocus,
+              borderColor: typeSecondaryBorderColorFocus,
+              '::before': {
+                content: '""',
+                position: 'absolute',
+                top: '0',
+                left: '0',
+                right: '0',
+                bottom: '0',
+                border: `${pxToRem(1)} solid ${typeSecondaryBorderColorInsetFocus}`,
+                borderRadius: `${pxToRem(2)}`,
+              },
+            }),
+          },
+        }),
+
+      ...(secondary &&
+        text && {
+          color: typeTextSecondaryColor,
+          ':hover': {
+            color: typeTextSecondaryColorHover,
+          },
+        }),
+
+      ...(circular && {
+        minWidth: height,
+        padding: 0,
+        borderRadius: circularRadius,
+      }),
+
+      ...(fluid && {
+        width: '100%',
+        maxWidth: '100%',
+      }),
+
+      ...(disabled && {
+        cursor: 'default',
+        color: typeDisabledButtonColor,
+        backgroundColor: typeDisabledButtonBackgroundColor,
+        borderColor: typeDisabledButtonBackgroundColor,
+        ':hover': {
+          backgroundColor: typeDisabledButtonBackgroundColor,
+          borderColor: typeDisabledButtonBackgroundColor,
+        },
+      }),
+
+      ...(iconOnly && {
+        minWidth: height,
+        padding: 0,
+      }),
+    }
+  },
+
+  content: ({ props }) => ({
+    overflow: 'hidden',
+    ...(typeof props.content === 'string' && truncateStyle),
+  }),
+}
+
+export default buttonStyles
diff --git a/src/themes/teams-high-contrast/components/Button/buttonVariables.ts b/src/themes/teams-high-contrast/components/Button/buttonVariables.ts
new file mode 100644
index 0000000000..ba74be6ae8
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Button/buttonVariables.ts
@@ -0,0 +1,79 @@
+import { pxToRem } from '../../../../lib'
+
+export interface IButtonVariables {
+  [key: string]: string | number
+
+  height: string
+  minWidth: string
+  maxWidth: string
+  borderRadius: string
+  color: string
+  backgroundColor: string
+  backgroundColorHover: string
+  circularRadius: string
+  paddingLeftRightValue: number
+  typePrimaryColor: string
+  typePrimaryBackgroundColor: string
+  typePrimaryBackgroundColorActive: string
+  typePrimaryBackgroundColorHover: string
+  typePrimaryBorderColor: string
+  typePrimaryBorderColorFocus: string
+  typePrimaryBorderColorInsetFocus: string
+  typeSecondaryColor: string
+  typeSecondaryBackgroundColor: string
+  typeSecondaryBackgroundColorActive: string
+  typeSecondaryBackgroundColorHover: string
+  typeSecondaryBackgroundColorFocus: string
+  typeSecondaryBorderColor: string
+  typeSecondaryBorderColorActive: string
+  typeSecondaryBorderColorHover: string
+  typeSecondaryBorderColorFocus: string
+  typeSecondaryBorderColorInsetFocus: string
+  typeDisabledButtonColor: string
+  typeDisabledButtonBackgroundColor: string
+  typeTextColorHover: string
+  typeTextPrimaryColor: string
+  typeTextPrimaryColorHover: string
+  typeTextSecondaryColor: string
+  typeTextSecondaryColorHover: string
+}
+
+export default (siteVars: any): IButtonVariables => {
+  return {
+    height: pxToRem(32),
+    minWidth: pxToRem(96),
+    maxWidth: pxToRem(280),
+    borderRadius: pxToRem(2),
+    color: siteVars.white,
+    backgroundColor: siteVars.black,
+    backgroundColorHover: siteVars.yellow,
+    circularRadius: pxToRem(999),
+    fontWeight: siteVars.fontWeightSemibold,
+    paddingLeftRightValue: 20,
+    typePrimaryColor: siteVars.white,
+    typePrimaryBackgroundColor: siteVars.black,
+    typePrimaryBackgroundColorActive: siteVars.brand02,
+    typePrimaryBackgroundColorHover: siteVars.yellow,
+    typePrimaryBackgroundColorFocus: siteVars.brand04,
+    typePrimaryBorderColor: 'transparent',
+    typePrimaryBorderColorFocus: siteVars.black,
+    typePrimaryBorderColorInsetFocus: siteVars.white,
+    typeSecondaryColor: siteVars.white,
+    typeSecondaryBackgroundColor: siteVars.black,
+    typeSecondaryBackgroundColorActive: siteVars.gray08,
+    typeSecondaryBackgroundColorHover: siteVars.yellow,
+    typeSecondaryBackgroundColorFocus: siteVars.gray08,
+    typeSecondaryBorderColor: siteVars.white,
+    typeSecondaryBorderColorActive: siteVars.gray06,
+    typeSecondaryBorderColorHover: siteVars.gray06,
+    typeSecondaryBorderColorFocus: siteVars.black,
+    typeSecondaryBorderColorInsetFocus: siteVars.white,
+    typeDisabledButtonColor: siteVars.gray08,
+    typeDisabledButtonBackgroundColor: siteVars.gray09,
+    typeTextColorHover: siteVars.brand04,
+    typeTextPrimaryColor: siteVars.brand,
+    typeTextPrimaryColorHover: siteVars.brand04,
+    typeTextSecondaryColor: siteVars.gray03,
+    typeTextSecondaryColorHover: siteVars.brand04,
+  }
+}
diff --git a/src/themes/teams-high-contrast/components/Icon/font/index.ts b/src/themes/teams-high-contrast/components/Icon/font/index.ts
new file mode 100644
index 0000000000..5e19b8d16b
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Icon/font/index.ts
@@ -0,0 +1,11 @@
+import { FontIconSpec } from 'theme'
+
+const fontAwesome = (iconCode: string): FontIconSpec => ({
+  fontFamily: 'Icons',
+  content: `'\\${iconCode}'`,
+})
+
+export default {
+  'call-home': fontAwesome('f015'),
+  'take-rest': fontAwesome('f0f4'),
+} as { [key: string]: FontIconSpec }
diff --git a/src/themes/teams-high-contrast/components/Icon/fontAwesomeIconStyles.ts b/src/themes/teams-high-contrast/components/Icon/fontAwesomeIconStyles.ts
new file mode 100644
index 0000000000..920f99b92d
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Icon/fontAwesomeIconStyles.ts
@@ -0,0 +1,1304 @@
+const fontAwesomeIcons = new Map([
+  // Deprecated *In/Out Naming Conflict)
+  ['linkedin in', 'f0e1'],
+  ['zoom in', 'f00e'],
+  ['zoom out', 'f010'],
+  ['sign in', 'f2f6'],
+  ['in cart', 'f218'],
+  ['log out', 'f2f5'],
+  ['sign out', 'f2f5'],
+
+  // Icons
+  ['500px', 'f26e'],
+  ['accessible icon', 'f368'],
+  ['accusoft', 'f369'],
+  ['address book', 'f2b9'],
+  ['address card', 'f2bb'],
+  ['adjust', 'f042'],
+  ['adn', 'f170'],
+  ['adversal', 'f36a'],
+  ['affiliatetheme', 'f36b'],
+  ['algolia', 'f36c'],
+  ['align center', 'f037'],
+  ['align justify', 'f039'],
+  ['align left', 'f036'],
+  ['align right', 'f038'],
+  ['amazon', 'f270'],
+  ['amazon pay', 'f42c'],
+  ['ambulance', 'f0f9'],
+  ['american sign language interpreting', 'f2a3'],
+  ['amilia', 'f36d'],
+  ['anchor', 'f13d'],
+  ['android', 'f17b'],
+  ['angellist', 'f209'],
+  ['angle double down', 'f103'],
+  ['angle double left', 'f100'],
+  ['angle double right', 'f101'],
+  ['angle double up', 'f102'],
+  ['angle down', 'f107'],
+  ['angle left', 'f104'],
+  ['angle right', 'f105'],
+  ['angle up', 'f106'],
+  ['angrycreative', 'f36e'],
+  ['angular', 'f420'],
+  ['app store', 'f36f'],
+  ['app store ios', 'f370'],
+  ['apper', 'f371'],
+  ['apple', 'f179'],
+  ['apple pay', 'f415'],
+  ['archive', 'f187'],
+  ['arrow alternate circle down', 'f358'],
+  ['arrow alternate circle left', 'f359'],
+  ['arrow alternate circle right', 'f35a'],
+  ['arrow alternate circle up', 'f35b'],
+  ['arrow circle down', 'f0ab'],
+  ['arrow circle left', 'f0a8'],
+  ['arrow circle right', 'f0a9'],
+  ['arrow circle up', 'f0aa'],
+  ['arrow down', 'f063'],
+  ['arrow left', 'f060'],
+  ['arrow right', 'f061'],
+  ['arrow up', 'f062'],
+  ['arrows alternate', 'f0b2'],
+  ['arrows alternate horizontal', 'f337'],
+  ['arrows alternate vertical', 'f338'],
+  ['assistive listening systems', 'f2a2'],
+  ['asterisk', 'f069'],
+  ['asymmetrik', 'f372'],
+  ['at', 'f1fa'],
+  ['audible', 'f373'],
+  ['audio description', 'f29e'],
+  ['autoprefixer', 'f41c'],
+  ['avianex', 'f374'],
+  ['aviato', 'f421'],
+  ['aws', 'f375'],
+  ['backward', 'f04a'],
+  ['balance scale', 'f24e'],
+  ['ban', 'f05e'],
+  ['band aid', 'f462'],
+  ['bandcamp', 'f2d5'],
+  ['barcode', 'f02a'],
+  ['bars', 'f0c9'],
+  ['baseball ball', 'f433'],
+  ['basketball ball', 'f434'],
+  ['bath', 'f2cd'],
+  ['battery empty', 'f244'],
+  ['battery full', 'f240'],
+  ['battery half', 'f242'],
+  ['battery quarter', 'f243'],
+  ['battery three quarters', 'f241'],
+  ['bed', 'f236'],
+  ['beer', 'f0fc'],
+  ['behance', 'f1b4'],
+  ['behance square', 'f1b5'],
+  ['bell', 'f0f3'],
+  ['bell slash', 'f1f6'],
+  ['bicycle', 'f206'],
+  ['bimobject', 'f378'],
+  ['binoculars', 'f1e5'],
+  ['birthday cake', 'f1fd'],
+  ['bitbucket', 'f171'],
+  ['bitcoin', 'f379'],
+  ['bity', 'f37a'],
+  ['black tie', 'f27e'],
+  ['blackberry', 'f37b'],
+  ['blind', 'f29d'],
+  ['blogger', 'f37c'],
+  ['blogger b', 'f37d'],
+  ['bluetooth', 'f293'],
+  ['bluetooth b', 'f294'],
+  ['bold', 'f032'],
+  ['bolt', 'f0e7'],
+  ['bomb', 'f1e2'],
+  ['book', 'f02d'],
+  ['bookmark', 'f02e'],
+  ['bowling ball', 'f436'],
+  ['box', 'f466'],
+  ['boxes', 'f468'],
+  ['braille', 'f2a1'],
+  ['briefcase', 'f0b1'],
+  ['btc', 'f15a'],
+  ['bug', 'f188'],
+  ['building', 'f1ad'],
+  ['bullhorn', 'f0a1'],
+  ['bullseye', 'f140'],
+  ['buromobelexperte', 'f37f'],
+  ['bus', 'f207'],
+  ['buysellads', 'f20d'],
+  ['calculator', 'f1ec'],
+  ['calendar', 'f133'],
+  ['calendar alternate', 'f073'],
+  ['calendar check', 'f274'],
+  ['calendar minus', 'f272'],
+  ['calendar plus', 'f271'],
+  ['calendar times', 'f273'],
+  ['camera', 'f030'],
+  ['camera retro', 'f083'],
+  ['car', 'f1b9'],
+  ['caret down', 'f0d7'],
+  ['caret left', 'f0d9'],
+  ['caret right', 'f0da'],
+  ['caret square down', 'f150'],
+  ['caret square left', 'f191'],
+  ['caret square right', 'f152'],
+  ['caret square up', 'f151'],
+  ['caret up', 'f0d8'],
+  ['cart arrow down', 'f218'],
+  ['cart plus', 'f217'],
+  ['cc amazon pay', 'f42d'],
+  ['cc amex', 'f1f3'],
+  ['cc apple pay', 'f416'],
+  ['cc diners club', 'f24c'],
+  ['cc discover', 'f1f2'],
+  ['cc jcb', 'f24b'],
+  ['cc mastercard', 'f1f1'],
+  ['cc paypal', 'f1f4'],
+  ['cc stripe', 'f1f5'],
+  ['cc visa', 'f1f0'],
+  ['centercode', 'f380'],
+  ['certificate', 'f0a3'],
+  ['chart area', 'f1fe'],
+  ['chart bar', 'f080'],
+  ['chart line', 'f201'],
+  ['chart pie', 'f200'],
+  ['check', 'f00c'],
+  ['check circle', 'f058'],
+  ['check square', 'f14a'],
+  ['chess', 'f439'],
+  ['chess bishop', 'f43a'],
+  ['chess board', 'f43c'],
+  ['chess king', 'f43f'],
+  ['chess knight', 'f441'],
+  ['chess pawn', 'f443'],
+  ['chess queen', 'f445'],
+  ['chess rook', 'f447'],
+  ['chevron circle down', 'f13a'],
+  ['chevron circle left', 'f137'],
+  ['chevron circle right', 'f138'],
+  ['chevron circle up', 'f139'],
+  ['chevron down', 'f078'],
+  ['chevron left', 'f053'],
+  ['chevron right', 'f054'],
+  ['chevron up', 'f077'],
+  ['child', 'f1ae'],
+  ['chrome', 'f268'],
+  ['circle', 'f111'],
+  ['circle notch', 'f1ce'],
+  ['clipboard', 'f328'],
+  ['clipboard check', 'f46c'],
+  ['clipboard list', 'f46d'],
+  ['clock', 'f017'],
+  ['clone', 'f24d'],
+  ['closed captioning', 'f20a'],
+  ['cloud', 'f0c2'],
+  ['cloudscale', 'f383'],
+  ['cloudsmith', 'f384'],
+  ['cloudversify', 'f385'],
+  ['code', 'f121'],
+  ['code branch', 'f126'],
+  ['codepen', 'f1cb'],
+  ['codiepie', 'f284'],
+  ['coffee', 'f0f4'],
+  ['cog', 'f013'],
+  ['cogs', 'f085'],
+  ['columns', 'f0db'],
+  ['comment', 'f075'],
+  ['comment alternate', 'f27a'],
+  ['comments', 'f086'],
+  ['compass', 'f14e'],
+  ['compress', 'f066'],
+  ['connectdevelop', 'f20e'],
+  ['contao', 'f26d'],
+  ['copy', 'f0c5'],
+  ['copyright', 'f1f9'],
+  ['cpanel', 'f388'],
+  ['creative commons', 'f25e'],
+  ['credit card', 'f09d'],
+  ['crop', 'f125'],
+  ['crosshairs', 'f05b'],
+  ['css3', 'f13c'],
+  ['css3 alternate', 'f38b'],
+  ['cube', 'f1b2'],
+  ['cubes', 'f1b3'],
+  ['cut', 'f0c4'],
+  ['cuttlefish', 'f38c'],
+  ['d and d', 'f38d'],
+  ['dashcube', 'f210'],
+  ['database', 'f1c0'],
+  ['deaf', 'f2a4'],
+  ['delicious', 'f1a5'],
+  ['deploydog', 'f38e'],
+  ['deskpro', 'f38f'],
+  ['desktop', 'f108'],
+  ['deviantart', 'f1bd'],
+  ['digg', 'f1a6'],
+  ['digital ocean', 'f391'],
+  ['discord', 'f392'],
+  ['discourse', 'f393'],
+  ['dna', 'f471'],
+  ['dochub', 'f394'],
+  ['docker', 'f395'],
+  ['dollar sign', 'f155'],
+  ['dolly', 'f472'],
+  ['dolly flatbed', 'f474'],
+  ['dot circle', 'f192'],
+  ['download', 'f019'],
+  ['draft2digital', 'f396'],
+  ['dribbble', 'f17d'],
+  ['dribbble square', 'f397'],
+  ['dropbox', 'f16b'],
+  ['drupal', 'f1a9'],
+  ['dyalog', 'f399'],
+  ['earlybirds', 'f39a'],
+  ['edge', 'f282'],
+  ['edit', 'f044'],
+  ['eject', 'f052'],
+  ['elementor', 'f430'],
+  ['ellipsis horizontal', 'f141'],
+  ['ellipsis vertical', 'f142'],
+  ['ember', 'f423'],
+  ['empire', 'f1d1'],
+  ['envelope', 'f0e0'],
+  ['envelope open', 'f2b6'],
+  ['envelope square', 'f199'],
+  ['envira', 'f299'],
+  ['eraser', 'f12d'],
+  ['erlang', 'f39d'],
+  ['ethereum', 'f42e'],
+  ['etsy', 'f2d7'],
+  ['euro sign', 'f153'],
+  ['exchange alternate', 'f362'],
+  ['exclamation', 'f12a'],
+  ['exclamation circle', 'f06a'],
+  ['exclamation triangle', 'f071'],
+  ['expand', 'f065'],
+  ['expand arrows alternate', 'f31e'],
+  ['expeditedssl', 'f23e'],
+  ['external alternate', 'f35d'],
+  ['external square alternate', 'f360'],
+  ['eye', 'f06e'],
+  ['eye dropper', 'f1fb'],
+  ['eye slash', 'f070'],
+  ['facebook', 'f09a'],
+  ['facebook f', 'f39e'],
+  ['facebook messenger', 'f39f'],
+  ['facebook square', 'f082'],
+  ['fast backward', 'f049'],
+  ['fast forward', 'f050'],
+  ['fax', 'f1ac'],
+  ['female', 'f182'],
+  ['fighter jet', 'f0fb'],
+  ['file', 'f15b'],
+  ['file alternate', 'f15c'],
+  ['file archive', 'f1c6'],
+  ['file audio', 'f1c7'],
+  ['file code', 'f1c9'],
+  ['file excel', 'f1c3'],
+  ['file image', 'f1c5'],
+  ['file pdf', 'f1c1'],
+  ['file powerpoint', 'f1c4'],
+  ['file video', 'f1c8'],
+  ['file word', 'f1c2'],
+  ['film', 'f008'],
+  ['filter', 'f0b0'],
+  ['fire', 'f06d'],
+  ['fire extinguisher', 'f134'],
+  ['firefox', 'f269'],
+  ['first aid', 'f479'],
+  ['first order', 'f2b0'],
+  ['firstdraft', 'f3a1'],
+  ['flag', 'f024'],
+  ['flag checkered', 'f11e'],
+  ['flask', 'f0c3'],
+  ['flickr', 'f16e'],
+  ['flipboard', 'f44d'],
+  ['fly', 'f417'],
+  ['folder', 'f07b'],
+  ['folder open', 'f07c'],
+  ['font', 'f031'],
+  ['font awesome', 'f2b4'],
+  ['font awesome alternate', 'f35c'],
+  ['font awesome flag', 'f425'],
+  ['fonticons', 'f280'],
+  ['fonticons fi', 'f3a2'],
+  ['football ball', 'f44e'],
+  ['fort awesome', 'f286'],
+  ['fort awesome alternate', 'f3a3'],
+  ['forumbee', 'f211'],
+  ['forward', 'f04e'],
+  ['foursquare', 'f180'],
+  ['free code camp', 'f2c5'],
+  ['freebsd', 'f3a4'],
+  ['frown', 'f119'],
+  ['futbol', 'f1e3'],
+  ['gamepad', 'f11b'],
+  ['gavel', 'f0e3'],
+  ['gem', 'f3a5'],
+  ['genderless', 'f22d'],
+  ['get pocket', 'f265'],
+  ['gg', 'f260'],
+  ['gg circle', 'f261'],
+  ['gift', 'f06b'],
+  ['git', 'f1d3'],
+  ['git square', 'f1d2'],
+  ['github', 'f09b'],
+  ['github alternate', 'f113'],
+  ['github square', 'f092'],
+  ['gitkraken', 'f3a6'],
+  ['gitlab', 'f296'],
+  ['gitter', 'f426'],
+  ['glass martini', 'f000'],
+  ['glide', 'f2a5'],
+  ['glide g', 'f2a6'],
+  ['globe', 'f0ac'],
+  ['gofore', 'f3a7'],
+  ['golf ball', 'f450'],
+  ['goodreads', 'f3a8'],
+  ['goodreads g', 'f3a9'],
+  ['google', 'f1a0'],
+  ['google drive', 'f3aa'],
+  ['google play', 'f3ab'],
+  ['google plus', 'f2b3'],
+  ['google plus g', 'f0d5'],
+  ['google plus square', 'f0d4'],
+  ['google wallet', 'f1ee'],
+  ['graduation cap', 'f19d'],
+  ['gratipay', 'f184'],
+  ['grav', 'f2d6'],
+  ['gripfire', 'f3ac'],
+  ['grunt', 'f3ad'],
+  ['gulp', 'f3ae'],
+  ['h square', 'f0fd'],
+  ['hacker news', 'f1d4'],
+  ['hacker news square', 'f3af'],
+  ['hand lizard', 'f258'],
+  ['hand paper', 'f256'],
+  ['hand peace', 'f25b'],
+  ['hand point down', 'f0a7'],
+  ['hand point left', 'f0a5'],
+  ['hand point right', 'f0a4'],
+  ['hand point up', 'f0a6'],
+  ['hand pointer', 'f25a'],
+  ['hand rock', 'f255'],
+  ['hand scissors', 'f257'],
+  ['hand spock', 'f259'],
+  ['handshake', 'f2b5'],
+  ['hashtag', 'f292'],
+  ['hdd', 'f0a0'],
+  ['heading', 'f1dc'],
+  ['headphones', 'f025'],
+  ['heart', 'f004'],
+  ['heartbeat', 'f21e'],
+  ['hips', 'f452'],
+  ['hire a helper', 'f3b0'],
+  ['history', 'f1da'],
+  ['hockey puck', 'f453'],
+  ['home', 'f015'],
+  ['hooli', 'f427'],
+  ['hospital', 'f0f8'],
+  ['hospital symbol', 'f47e'],
+  ['hotjar', 'f3b1'],
+  ['hourglass', 'f254'],
+  ['hourglass end', 'f253'],
+  ['hourglass half', 'f252'],
+  ['hourglass start', 'f251'],
+  ['houzz', 'f27c'],
+  ['html5', 'f13b'],
+  ['hubspot', 'f3b2'],
+  ['i cursor', 'f246'],
+  ['id badge', 'f2c1'],
+  ['id card', 'f2c2'],
+  ['image', 'f03e'],
+  ['images', 'f302'],
+  ['imdb', 'f2d8'],
+  ['inbox', 'f01c'],
+  ['indent', 'f03c'],
+  ['industry', 'f275'],
+  ['info', 'f129'],
+  ['info circle', 'f05a'],
+  ['instagram', 'f16d'],
+  ['internet explorer', 'f26b'],
+  ['ioxhost', 'f208'],
+  ['italic', 'f033'],
+  ['itunes', 'f3b4'],
+  ['itunes note', 'f3b5'],
+  ['jenkins', 'f3b6'],
+  ['joget', 'f3b7'],
+  ['joomla', 'f1aa'],
+  ['js', 'f3b8'],
+  ['js square', 'f3b9'],
+  ['jsfiddle', 'f1cc'],
+  ['key', 'f084'],
+  ['keyboard', 'f11c'],
+  ['keycdn', 'f3ba'],
+  ['kickstarter', 'f3bb'],
+  ['kickstarter k', 'f3bc'],
+  ['korvue', 'f42f'],
+  ['language', 'f1ab'],
+  ['laptop', 'f109'],
+  ['laravel', 'f3bd'],
+  ['lastfm', 'f202'],
+  ['lastfm square', 'f203'],
+  ['leaf', 'f06c'],
+  ['leanpub', 'f212'],
+  ['lemon', 'f094'],
+  ['less', 'f41d'],
+  ['level down alternate', 'f3be'],
+  ['level up alternate', 'f3bf'],
+  ['life ring', 'f1cd'],
+  ['lightbulb', 'f0eb'],
+  ['linechat', 'f3c0'],
+  ['linkify', 'f0c1'],
+  ['linkedin', 'f08c'],
+  ['linkedin alt', 'f0e1'],
+  ['linode', 'f2b8'],
+  ['linux', 'f17c'],
+  ['lira sign', 'f195'],
+  ['list', 'f03a'],
+  ['list alternate', 'f022'],
+  ['list ol', 'f0cb'],
+  ['list ul', 'f0ca'],
+  ['location arrow', 'f124'],
+  ['lock', 'f023'],
+  ['lock open', 'f3c1'],
+  ['long arrow alternate down', 'f309'],
+  ['long arrow alternate left', 'f30a'],
+  ['long arrow alternate right', 'f30b'],
+  ['long arrow alternate up', 'f30c'],
+  ['low vision', 'f2a8'],
+  ['lyft', 'f3c3'],
+  ['magento', 'f3c4'],
+  ['magic', 'f0d0'],
+  ['magnet', 'f076'],
+  ['male', 'f183'],
+  ['map', 'f279'],
+  ['map marker', 'f041'],
+  ['map marker alternate', 'f3c5'],
+  ['map pin', 'f276'],
+  ['map signs', 'f277'],
+  ['mars', 'f222'],
+  ['mars double', 'f227'],
+  ['mars stroke', 'f229'],
+  ['mars stroke horizontal', 'f22b'],
+  ['mars stroke vertical', 'f22a'],
+  ['maxcdn', 'f136'],
+  ['medapps', 'f3c6'],
+  ['medium', 'f23a'],
+  ['medium m', 'f3c7'],
+  ['medkit', 'f0fa'],
+  ['medrt', 'f3c8'],
+  ['meetup', 'f2e0'],
+  ['meh', 'f11a'],
+  ['mercury', 'f223'],
+  ['microchip', 'f2db'],
+  ['microphone', 'f130'],
+  ['microphone slash', 'f131'],
+  ['microsoft', 'f3ca'],
+  ['minus', 'f068'],
+  ['minus circle', 'f056'],
+  ['minus square', 'f146'],
+  ['mix', 'f3cb'],
+  ['mixcloud', 'f289'],
+  ['mizuni', 'f3cc'],
+  ['mobile', 'f10b'],
+  ['mobile alternate', 'f3cd'],
+  ['modx', 'f285'],
+  ['monero', 'f3d0'],
+  ['money bill alternate', 'f3d1'],
+  ['moon', 'f186'],
+  ['motorcycle', 'f21c'],
+  ['mouse pointer', 'f245'],
+  ['music', 'f001'],
+  ['napster', 'f3d2'],
+  ['neuter', 'f22c'],
+  ['newspaper', 'f1ea'],
+  ['nintendo switch', 'f418'],
+  ['node', 'f419'],
+  ['node js', 'f3d3'],
+  ['npm', 'f3d4'],
+  ['ns8', 'f3d5'],
+  ['nutritionix', 'f3d6'],
+  ['object group', 'f247'],
+  ['object ungroup', 'f248'],
+  ['odnoklassniki', 'f263'],
+  ['odnoklassniki square', 'f264'],
+  ['opencart', 'f23d'],
+  ['openid', 'f19b'],
+  ['opera', 'f26a'],
+  ['optin monster', 'f23c'],
+  ['osi', 'f41a'],
+  ['outdent', 'f03b'],
+  ['page4', 'f3d7'],
+  ['pagelines', 'f18c'],
+  ['paint brush', 'f1fc'],
+  ['palfed', 'f3d8'],
+  ['pallet', 'f482'],
+  ['paper plane', 'f1d8'],
+  ['paperclip', 'f0c6'],
+  ['paragraph', 'f1dd'],
+  ['paste', 'f0ea'],
+  ['patreon', 'f3d9'],
+  ['pause', 'f04c'],
+  ['pause circle', 'f28b'],
+  ['paw', 'f1b0'],
+  ['paypal', 'f1ed'],
+  ['pen square', 'f14b'],
+  ['pencil alternate', 'f303'],
+  ['percent', 'f295'],
+  ['periscope', 'f3da'],
+  ['phabricator', 'f3db'],
+  ['phoenix framework', 'f3dc'],
+  ['phone', 'f095'],
+  ['phone square', 'f098'],
+  ['phone volume', 'f2a0'],
+  ['php', 'f457'],
+  ['pied piper', 'f2ae'],
+  ['pied piper alternate', 'f1a8'],
+  ['pied piper pp', 'f1a7'],
+  ['pills', 'f484'],
+  ['pinterest', 'f0d2'],
+  ['pinterest p', 'f231'],
+  ['pinterest square', 'f0d3'],
+  ['plane', 'f072'],
+  ['play', 'f04b'],
+  ['play circle', 'f144'],
+  ['playstation', 'f3df'],
+  ['plug', 'f1e6'],
+  ['plus', 'f067'],
+  ['plus circle', 'f055'],
+  ['plus square', 'f0fe'],
+  ['podcast', 'f2ce'],
+  ['pound sign', 'f154'],
+  ['power off', 'f011'],
+  ['print', 'f02f'],
+  ['product hunt', 'f288'],
+  ['pushed', 'f3e1'],
+  ['puzzle piece', 'f12e'],
+  ['python', 'f3e2'],
+  ['qq', 'f1d6'],
+  ['qrcode', 'f029'],
+  ['question', 'f128'],
+  ['question circle', 'f059'],
+  ['quidditch', 'f458'],
+  ['quinscape', 'f459'],
+  ['quora', 'f2c4'],
+  ['quote left', 'f10d'],
+  ['quote right', 'f10e'],
+  ['random', 'f074'],
+  ['ravelry', 'f2d9'],
+  ['react', 'f41b'],
+  ['rebel', 'f1d0'],
+  ['recycle', 'f1b8'],
+  ['redriver', 'f3e3'],
+  ['reddit', 'f1a1'],
+  ['reddit alien', 'f281'],
+  ['reddit square', 'f1a2'],
+  ['redo', 'f01e'],
+  ['redo alternate', 'f2f9'],
+  ['registered', 'f25d'],
+  ['rendact', 'f3e4'],
+  ['renren', 'f18b'],
+  ['reply', 'f3e5'],
+  ['reply all', 'f122'],
+  ['replyd', 'f3e6'],
+  ['resolving', 'f3e7'],
+  ['retweet', 'f079'],
+  ['road', 'f018'],
+  ['rocket', 'f135'],
+  ['rocketchat', 'f3e8'],
+  ['rockrms', 'f3e9'],
+  ['rss', 'f09e'],
+  ['rss square', 'f143'],
+  ['ruble sign', 'f158'],
+  ['rupee sign', 'f156'],
+  ['safari', 'f267'],
+  ['sass', 'f41e'],
+  ['save', 'f0c7'],
+  ['schlix', 'f3ea'],
+  ['scribd', 'f28a'],
+  ['search', 'f002'],
+  ['search minus', 'f010'],
+  ['search plus', 'f00e'],
+  ['searchengin', 'f3eb'],
+  ['sellcast', 'f2da'],
+  ['sellsy', 'f213'],
+  ['server', 'f233'],
+  ['servicestack', 'f3ec'],
+  ['share', 'f064'],
+  ['share alternate', 'f1e0'],
+  ['share alternate square', 'f1e1'],
+  ['share square', 'f14d'],
+  ['shekel sign', 'f20b'],
+  ['shield alternate', 'f3ed'],
+  ['ship', 'f21a'],
+  ['shipping fast', 'f48b'],
+  ['shirtsinbulk', 'f214'],
+  ['shopping bag', 'f290'],
+  ['shopping basket', 'f291'],
+  ['shopping cart', 'f07a'],
+  ['shower', 'f2cc'],
+  ['sign language', 'f2a7'],
+  ['signal', 'f012'],
+  ['simplybuilt', 'f215'],
+  ['sistrix', 'f3ee'],
+  ['sitemap', 'f0e8'],
+  ['skyatlas', 'f216'],
+  ['skype', 'f17e'],
+  ['slack', 'f198'],
+  ['slack hash', 'f3ef'],
+  ['sliders horizontal', 'f1de'],
+  ['slideshare', 'f1e7'],
+  ['smile', 'f118'],
+  ['snapchat', 'f2ab'],
+  ['snapchat ghost', 'f2ac'],
+  ['snapchat square', 'f2ad'],
+  ['snowflake', 'f2dc'],
+  ['sort', 'f0dc'],
+  ['sort alphabet down', 'f15d'],
+  ['sort alphabet up', 'f15e'],
+  ['sort amount down', 'f160'],
+  ['sort amount up', 'f161'],
+  ['sort down', 'f0dd'],
+  ['sort numeric down', 'f162'],
+  ['sort numeric up', 'f163'],
+  ['sort up', 'f0de'],
+  ['soundcloud', 'f1be'],
+  ['space shuttle', 'f197'],
+  ['speakap', 'f3f3'],
+  ['spinner', 'f110'],
+  ['spotify', 'f1bc'],
+  ['square', 'f0c8'],
+  ['square full', 'f45c'],
+  ['stack exchange', 'f18d'],
+  ['stack overflow', 'f16c'],
+  ['star', 'f005'],
+  ['star half', 'f089'],
+  ['staylinked', 'f3f5'],
+  ['steam', 'f1b6'],
+  ['steam square', 'f1b7'],
+  ['steam symbol', 'f3f6'],
+  ['step backward', 'f048'],
+  ['step forward', 'f051'],
+  ['stethoscope', 'f0f1'],
+  ['sticker mule', 'f3f7'],
+  ['sticky note', 'f249'],
+  ['stop', 'f04d'],
+  ['stop circle', 'f28d'],
+  ['stopwatch', 'f2f2'],
+  ['strava', 'f428'],
+  ['street view', 'f21d'],
+  ['strikethrough', 'f0cc'],
+  ['stripe', 'f429'],
+  ['stripe s', 'f42a'],
+  ['studiovinari', 'f3f8'],
+  ['stumbleupon', 'f1a4'],
+  ['stumbleupon circle', 'f1a3'],
+  ['subscript', 'f12c'],
+  ['subway', 'f239'],
+  ['suitcase', 'f0f2'],
+  ['sun', 'f185'],
+  ['superpowers', 'f2dd'],
+  ['superscript', 'f12b'],
+  ['supple', 'f3f9'],
+  ['sync', 'f021'],
+  ['sync alternate', 'f2f1'],
+  ['syringe', 'f48e'],
+  ['table', 'f0ce'],
+  ['table tennis', 'f45d'],
+  ['tablet', 'f10a'],
+  ['tablet alternate', 'f3fa'],
+  ['tachometer alternate', 'f3fd'],
+  ['tag', 'f02b'],
+  ['tags', 'f02c'],
+  ['tasks', 'f0ae'],
+  ['taxi', 'f1ba'],
+  ['telegram', 'f2c6'],
+  ['telegram plane', 'f3fe'],
+  ['tencent weibo', 'f1d5'],
+  ['terminal', 'f120'],
+  ['text height', 'f034'],
+  ['text width', 'f035'],
+  ['th', 'f00a'],
+  ['th large', 'f009'],
+  ['th list', 'f00b'],
+  ['themeisle', 'f2b2'],
+  ['thermometer', 'f491'],
+  ['thermometer empty', 'f2cb'],
+  ['thermometer full', 'f2c7'],
+  ['thermometer half', 'f2c9'],
+  ['thermometer quarter', 'f2ca'],
+  ['thermometer three quarters', 'f2c8'],
+  ['thumbs down', 'f165'],
+  ['thumbs up', 'f164'],
+  ['thumbtack', 'f08d'],
+  ['ticket alternate', 'f3ff'],
+  ['times', 'f00d'],
+  ['times circle', 'f057'],
+  ['tint', 'f043'],
+  ['toggle off', 'f204'],
+  ['toggle on', 'f205'],
+  ['trademark', 'f25c'],
+  ['train', 'f238'],
+  ['transgender', 'f224'],
+  ['transgender alternate', 'f225'],
+  ['trash', 'f1f8'],
+  ['trash alternate', 'f2ed'],
+  ['tree', 'f1bb'],
+  ['trello', 'f181'],
+  ['tripadvisor', 'f262'],
+  ['trophy', 'f091'],
+  ['truck', 'f0d1'],
+  ['tty', 'f1e4'],
+  ['tumblr', 'f173'],
+  ['tumblr square', 'f174'],
+  ['tv', 'f26c'],
+  ['twitch', 'f1e8'],
+  ['twitter', 'f099'],
+  ['twitter square', 'f081'],
+  ['typo3', 'f42b'],
+  ['uber', 'f402'],
+  ['uikit', 'f403'],
+  ['umbrella', 'f0e9'],
+  ['underline', 'f0cd'],
+  ['undo', 'f0e2'],
+  ['undo alternate', 'f2ea'],
+  ['uniregistry', 'f404'],
+  ['universal access', 'f29a'],
+  ['university', 'f19c'],
+  ['unlink', 'f127'],
+  ['unlock', 'f09c'],
+  ['unlock alternate', 'f13e'],
+  ['untappd', 'f405'],
+  ['upload', 'f093'],
+  ['usb', 'f287'],
+  ['user', 'f007'],
+  ['user circle', 'f2bd'],
+  ['user md', 'f0f0'],
+  ['user plus', 'f234'],
+  ['user secret', 'f21b'],
+  ['user times', 'f235'],
+  ['users', 'f0c0'],
+  ['ussunnah', 'f407'],
+  ['utensil spoon', 'f2e5'],
+  ['utensils', 'f2e7'],
+  ['vaadin', 'f408'],
+  ['venus', 'f221'],
+  ['venus double', 'f226'],
+  ['venus mars', 'f228'],
+  ['viacoin', 'f237'],
+  ['viadeo', 'f2a9'],
+  ['viadeo square', 'f2aa'],
+  ['viber', 'f409'],
+  ['video', 'f03d'],
+  ['vimeo', 'f40a'],
+  ['vimeo square', 'f194'],
+  ['vimeo v', 'f27d'],
+  ['vine', 'f1ca'],
+  ['vk', 'f189'],
+  ['vnv', 'f40b'],
+  ['volleyball ball', 'f45f'],
+  ['volume down', 'f027'],
+  ['volume off', 'f026'],
+  ['volume up', 'f028'],
+  ['vuejs', 'f41f'],
+  ['warehouse', 'f494'],
+  ['weibo', 'f18a'],
+  ['weight', 'f496'],
+  ['weixin', 'f1d7'],
+  ['whatsapp', 'f232'],
+  ['whatsapp square', 'f40c'],
+  ['wheelchair', 'f193'],
+  ['whmcs', 'f40d'],
+  ['wifi', 'f1eb'],
+  ['wikipedia w', 'f266'],
+  ['window close', 'f410'],
+  ['window maximize', 'f2d0'],
+  ['window minimize', 'f2d1'],
+  ['window restore', 'f2d2'],
+  ['windows', 'f17a'],
+  ['won sign', 'f159'],
+  ['wordpress', 'f19a'],
+  ['wordpress simple', 'f411'],
+  ['wpbeginner', 'f297'],
+  ['wpexplorer', 'f2de'],
+  ['wpforms', 'f298'],
+  ['wrench', 'f0ad'],
+  ['xbox', 'f412'],
+  ['xing', 'f168'],
+  ['xing square', 'f169'],
+  ['y combinator', 'f23b'],
+  ['yahoo', 'f19e'],
+  ['yandex', 'f413'],
+  ['yandex international', 'f414'],
+  ['yelp', 'f1e9'],
+  ['yen sign', 'f157'],
+  ['yoast', 'f2b1'],
+  ['youtube', 'f167'],
+  ['youtube square', 'f431'],
+
+  // Aliases
+  ['chess rock', 'f447'],
+  ['ordered list', 'f0cb'],
+  ['unordered list', 'f0ca'],
+  ['user doctor', 'f0f0'],
+  ['shield', 'f3ed'],
+  ['puzzle', 'f12e'],
+  ['credit card amazon pay', 'f42d'],
+  ['credit card american express', 'f1f3'],
+  ['credit card diners club', 'f24c'],
+  ['credit card discover', 'f1f2'],
+  ['credit card jcb', 'f24b'],
+  ['credit card mastercard', 'f1f1'],
+  ['credit card paypal', 'f1f4'],
+  ['credit card stripe', 'f1f5'],
+  ['credit card visa', 'f1f0'],
+  ['add circle', 'f055'],
+  ['add square', 'f0fe'],
+  ['add to calendar', 'f271'],
+  ['add to cart', 'f217'],
+  ['add user', 'f234'],
+  ['add', 'f067'],
+  ['alarm mute', 'f1f6'],
+  ['alarm', 'f0f3'],
+  ['ald', 'f2a2'],
+  ['als', 'f2a2'],
+  ['american express card', 'f1f3'],
+  ['american express', 'f1f3'],
+  ['amex', 'f1f3'],
+  ['announcement', 'f0a1'],
+  ['area chart', 'f1fe'],
+  ['area graph', 'f1fe'],
+  ['arrow down cart', 'f218'],
+  ['asexual', 'f22d'],
+  ['asl interpreting', 'f2a3'],
+  ['asl', 'f2a3'],
+  ['assistive listening devices', 'f2a2'],
+  ['attach', 'f0c6'],
+  ['attention', 'f06a'],
+  ['balance', 'f24e'],
+  ['bar', 'f0fc'],
+  ['bathtub', 'f2cd'],
+  ['battery four', 'f240'],
+  ['battery high', 'f241'],
+  ['battery low', 'f243'],
+  ['battery medium', 'f242'],
+  ['battery one', 'f243'],
+  ['battery three', 'f241'],
+  ['battery two', 'f242'],
+  ['battery zero', 'f244'],
+  ['birthday', 'f1fd'],
+  ['block layout', 'f009'],
+  ['bluetooth alternative', 'f294'],
+  ['broken chain', 'f127'],
+  ['browser', 'f022'],
+  ['call square', 'f098'],
+  ['call', 'f095'],
+  ['cancel', 'f00d'],
+  ['cart', 'f07a'],
+  ['cc', 'f20a'],
+  ['chain', 'f0c1'],
+  ['chat', 'f075'],
+  ['checked calendar', 'f274'],
+  ['checkmark', 'f00c'],
+  ['circle notched', 'f1ce'],
+  ['close', 'f00d'],
+  ['cny', 'f157'],
+  ['cocktail', 'f000'],
+  ['commenting', 'f27a'],
+  ['computer', 'f108'],
+  ['configure', 'f0ad'],
+  ['content', 'f0c9'],
+  ['deafness', 'f2a4'],
+  ['delete calendar', 'f273'],
+  ['delete', 'f00d'],
+  ['detective', 'f21b'],
+  ['diners club card', 'f24c'],
+  ['diners club', 'f24c'],
+  ['discover card', 'f1f2'],
+  ['discover', 'f1f2'],
+  ['discussions', 'f086'],
+  ['doctor', 'f0f0'],
+  ['dollar', 'f155'],
+  ['dont', 'f05e'],
+  ['dribble', 'f17d'],
+  ['drivers license', 'f2c2'],
+  ['dropdown', 'f0d7'],
+  ['eercast', 'f2da'],
+  ['emergency', 'f0f9'],
+  ['envira gallery', 'f299'],
+  ['erase', 'f12d'],
+  ['eur', 'f153'],
+  ['euro', 'f153'],
+  ['eyedropper', 'f1fb'],
+  ['fa', 'f2b4'],
+  ['factory', 'f275'],
+  ['favorite', 'f005'],
+  ['feed', 'f09e'],
+  ['female homosexual', 'f226'],
+  ['file text', 'f15c'],
+  ['find', 'f1e5'],
+  ['first aid', 'f0fa'],
+  ['five hundred pixels', 'f26e'],
+  ['fork', 'f126'],
+  ['game', 'f11b'],
+  ['gay', 'f227'],
+  ['gbp', 'f154'],
+  ['gittip', 'f184'],
+  ['google plus circle', 'f2b3'],
+  ['google plus official', 'f2b3'],
+  ['grab', 'f255'],
+  ['graduation', 'f19d'],
+  ['grid layout', 'f00a'],
+  ['group', 'f0c0'],
+  ['h', 'f0fd'],
+  ['hand victory', 'f25b'],
+  ['handicap', 'f193'],
+  ['hard of hearing', 'f2a4'],
+  ['header', 'f1dc'],
+  ['help circle', 'f059'],
+  ['help', 'f128'],
+  ['heterosexual', 'f228'],
+  ['hide', 'f070'],
+  ['hotel', 'f236'],
+  ['hourglass four', 'f254'],
+  ['hourglass full', 'f254'],
+  ['hourglass one', 'f251'],
+  ['hourglass three', 'f253'],
+  ['hourglass two', 'f252'],
+  ['idea', 'f0eb'],
+  ['ils', 'f20b'],
+  ['in-cart', 'f218'],
+  ['inr', 'f156'],
+  ['intergender', 'f224'],
+  ['intersex', 'f224'],
+  ['japan credit bureau card', 'f24b'],
+  ['japan credit bureau', 'f24b'],
+  ['jcb', 'f24b'],
+  ['jpy', 'f157'],
+  ['krw', 'f159'],
+  ['lab', 'f0c3'],
+  ['law', 'f24e'],
+  ['legal', 'f0e3'],
+  ['lesbian', 'f226'],
+  ['lightning', 'f0e7'],
+  ['like', 'f004'],
+  ['line graph', 'f201'],
+  ['linkedin square', 'f08c'],
+  ['linkify', 'f0c1'],
+  ['lira', 'f195'],
+  ['list layout', 'f00b'],
+  ['magnify', 'f00e'],
+  ['mail forward', 'f064'],
+  ['mail square', 'f199'],
+  ['mail', 'f0e0'],
+  ['male homosexual', 'f227'],
+  ['man', 'f222'],
+  ['marker', 'f041'],
+  ['mars alternate', 'f229'],
+  ['mars horizontal', 'f22b'],
+  ['mars vertical', 'f22a'],
+  ['mastercard card', 'f1f1'],
+  ['mastercard', 'f1f1'],
+  ['microsoft edge', 'f282'],
+  ['military', 'f0fb'],
+  ['ms edge', 'f282'],
+  ['mute', 'f131'],
+  ['new pied piper', 'f2ae'],
+  ['non binary transgender', 'f223'],
+  ['numbered list', 'f0cb'],
+  ['optinmonster', 'f23c'],
+  ['options', 'f1de'],
+  ['other gender horizontal', 'f22b'],
+  ['other gender vertical', 'f22a'],
+  ['other gender', 'f229'],
+  ['payment', 'f09d'],
+  ['paypal card', 'f1f4'],
+  ['pencil square', 'f14b'],
+  ['photo', 'f030'],
+  ['picture', 'f03e'],
+  ['pie chart', 'f200'],
+  ['pie graph', 'f200'],
+  ['pied piper hat', 'f2ae'],
+  ['pin', 'f08d'],
+  ['plus cart', 'f217'],
+  ['pocket', 'f265'],
+  ['point', 'f041'],
+  ['pointing down', 'f0a7'],
+  ['pointing left', 'f0a5'],
+  ['pointing right', 'f0a4'],
+  ['pointing up', 'f0a6'],
+  ['pound', 'f154'],
+  ['power cord', 'f1e6'],
+  ['power', 'f011'],
+  ['privacy', 'f084'],
+  ['r circle', 'f25d'],
+  ['rain', 'f0e9'],
+  ['record', 'f03d'],
+  ['refresh', 'f021'],
+  ['remove circle', 'f057'],
+  ['remove from calendar', 'f272'],
+  ['remove user', 'f235'],
+  ['remove', 'f00d'],
+  ['repeat', 'f01e'],
+  ['rmb', 'f157'],
+  ['rouble', 'f158'],
+  ['rub', 'f158'],
+  ['ruble', 'f158'],
+  ['rupee', 'f156'],
+  ['s15', 'f2cd'],
+  ['selected radio', 'f192'],
+  ['send', 'f1d8'],
+  ['setting', 'f013'],
+  ['settings', 'f085'],
+  ['shekel', 'f20b'],
+  ['sheqel', 'f20b'],
+  ['shipping', 'f0d1'],
+  ['shop', 'f07a'],
+  ['shuffle', 'f074'],
+  ['shutdown', 'f011'],
+  ['sidebar', 'f0c9'],
+  ['signing', 'f2a7'],
+  ['signup', 'f044'],
+  ['sliders', 'f1de'],
+  ['soccer', 'f1e3'],
+  ['sort alphabet ascending', 'f15d'],
+  ['sort alphabet descending', 'f15e'],
+  ['sort ascending', 'f0de'],
+  ['sort content ascending', 'f160'],
+  ['sort content descending', 'f161'],
+  ['sort descending', 'f0dd'],
+  ['sort numeric ascending', 'f162'],
+  ['sort numeric descending', 'f163'],
+  ['sound', 'f025'],
+  ['spy', 'f21b'],
+  ['stripe card', 'f1f5'],
+  ['student', 'f19d'],
+  ['talk', 'f27a'],
+  ['target', 'f140'],
+  ['teletype', 'f1e4'],
+  ['television', 'f26c'],
+  ['text cursor', 'f246'],
+  ['text telephone', 'f1e4'],
+  ['theme isle', 'f2b2'],
+  ['theme', 'f043'],
+  ['thermometer', 'f2c7'],
+  ['thumb tack', 'f08d'],
+  ['time', 'f017'],
+  ['tm', 'f25c'],
+  ['toggle down', 'f150'],
+  ['toggle left', 'f191'],
+  ['toggle right', 'f152'],
+  ['toggle up', 'f151'],
+  ['translate', 'f1ab'],
+  ['travel', 'f0b1'],
+  ['treatment', 'f0f1'],
+  ['triangle down', 'f0d7'],
+  ['triangle left', 'f0d9'],
+  ['triangle right', 'f0da'],
+  ['triangle up', 'f0d8'],
+  ['try', 'f195'],
+  ['unhide', 'f06e'],
+  ['unlinkify', 'f127'],
+  ['unmute', 'f130'],
+  ['usd', 'f155'],
+  ['user cancel', 'f235'],
+  ['user close', 'f235'],
+  ['user delete', 'f235'],
+  ['user x', 'f235'],
+  ['vcard', 'f2bb'],
+  ['video camera', 'f03d'],
+  ['video play', 'f144'],
+  ['visa card', 'f1f0'],
+  ['visa', 'f1f0'],
+  ['volume control phone', 'f2a0'],
+  ['wait', 'f017'],
+  ['warning circle', 'f06a'],
+  ['warning sign', 'f071'],
+  ['warning', 'f12a'],
+  ['wechat', 'f1d7'],
+  ['wi-fi', 'f1eb'],
+  ['wikipedia', 'f266'],
+  ['winner', 'f091'],
+  ['wizard', 'f0d0'],
+  ['woman', 'f221'],
+  ['won', 'f159'],
+  ['wordpress beginner', 'f297'],
+  ['wordpress forms', 'f298'],
+  ['world', 'f0ac'],
+  ['write square', 'f14b'],
+  ['x', 'f00d'],
+  ['yc', 'f23b'],
+  ['ycombinator', 'f23b'],
+  ['yen', 'f157'],
+  ['zip', 'f187'],
+  ['zoom-in', 'f00e'],
+  ['zoom-out', 'f010'],
+  ['zoom', 'f00e'],
+  ['bitbucket square', 'f171'],
+  ['checkmark box', 'f14a'],
+  ['circle thin', 'f111'],
+  ['cloud download', 'f381'],
+  ['cloud upload', 'f382'],
+  ['compose', 'f303'],
+  ['conversation', 'f086'],
+  ['credit card alternative', 'f09d'],
+  ['currency', 'f3d1'],
+  ['dashboard', 'f3fd'],
+  ['diamond', 'f3a5'],
+  ['disk', 'f0a0'],
+  ['exchange', 'f362'],
+  ['external share', 'f14d'],
+  ['external square', 'f360'],
+  ['external', 'f35d'],
+  ['facebook official', 'f082'],
+  ['food', 'f2e7'],
+  ['hourglass zero', 'f253'],
+  ['level down', 'f3be'],
+  ['level up', 'f3bf'],
+  ['logout', 'f2f5'],
+  ['meanpath', 'f0c8'],
+  ['money', 'f3d1'],
+  ['move', 'f0b2'],
+  ['pencil', 'f303'],
+  ['protect', 'f023'],
+  ['radio', 'f192'],
+  ['remove bookmark', 'f02e'],
+  ['resize horizontal', 'f337'],
+  ['resize vertical', 'f338'],
+  ['sign-in', 'f2f6'],
+  ['sign-out', 'f2f5'],
+  ['spoon', 'f2e5'],
+  ['star half empty', 'f089'],
+  ['star half full', 'f089'],
+  ['ticket', 'f3ff'],
+  ['times rectangle', 'f410'],
+  ['write', 'f303'],
+  ['youtube play', 'f167'],
+  ['address book outline', 'f2b9'],
+  ['address card outline', 'f2bb'],
+  ['arrow alternate circle down outline', 'f358'],
+  ['arrow alternate circle left outline', 'f359'],
+  ['arrow alternate circle right outline', 'f35a'],
+  ['arrow alternate circle up outline', 'f35b'],
+  ['bell outline', 'f0f3'],
+  ['bell slash outline', 'f1f6'],
+  ['bookmark outline', 'f02e'],
+  ['building outline', 'f1ad'],
+  ['calendar outline', 'f133'],
+  ['calendar alternate outline', 'f073'],
+  ['calendar check outline', 'f274'],
+  ['calendar minus outline', 'f272'],
+  ['calendar plus outline', 'f271'],
+  ['calendar times outline', 'f273'],
+  ['caret square down outline', 'f150'],
+  ['caret square left outline', 'f191'],
+  ['caret square right outline', 'f152'],
+  ['caret square up outline', 'f151'],
+  ['chart bar outline', 'f080'],
+  ['check circle outline', 'f058'],
+  ['check square outline', 'f14a'],
+  ['circle outline', 'f111'],
+  ['clipboard outline', 'f328'],
+  ['clock outline', 'f017'],
+  ['clone outline', 'f24d'],
+  ['closed captioning outline', 'f20a'],
+  ['comment outline', 'f075'],
+  ['comment alternate outline', 'f27a'],
+  ['comments outline', 'f086'],
+  ['compass outline', 'f14e'],
+  ['copy outline', 'f0c5'],
+  ['copyright outline', 'f1f9'],
+  ['credit card outline', 'f09d'],
+  ['dot circle outline', 'f192'],
+  ['edit outline', 'f044'],
+  ['envelope outline', 'f0e0'],
+  ['envelope open outline', 'f2b6'],
+  ['eye slash outline', 'f070'],
+  ['file outline', 'f15b'],
+  ['file alternate outline', 'f15c'],
+  ['file archive outline', 'f1c6'],
+  ['file audio outline', 'f1c7'],
+  ['file code outline', 'f1c9'],
+  ['file excel outline', 'f1c3'],
+  ['file image outline', 'f1c5'],
+  ['file pdf outline', 'f1c1'],
+  ['file powerpoint outline', 'f1c4'],
+  ['file video outline', 'f1c8'],
+  ['file word outline', 'f1c2'],
+  ['flag outline', 'f024'],
+  ['folder outline', 'f07b'],
+  ['folder open outline', 'f07c'],
+  ['frown outline', 'f119'],
+  ['futbol outline', 'f1e3'],
+  ['gem outline', 'f3a5'],
+  ['hand lizard outline', 'f258'],
+  ['hand paper outline', 'f256'],
+  ['hand peace outline', 'f25b'],
+  ['hand point down outline', 'f0a7'],
+  ['hand point left outline', 'f0a5'],
+  ['hand point right outline', 'f0a4'],
+  ['hand point up outline', 'f0a6'],
+  ['hand pointer outline', 'f25a'],
+  ['hand rock outline', 'f255'],
+  ['hand scissors outline', 'f257'],
+  ['hand spock outline', 'f259'],
+  ['handshake outline', 'f2b5'],
+  ['hdd outline', 'f0a0'],
+  ['heart outline', 'f004'],
+  ['hospital outline', 'f0f8'],
+  ['hourglass outline', 'f254'],
+  ['id badge outline', 'f2c1'],
+  ['id card outline', 'f2c2'],
+  ['image outline', 'f03e'],
+  ['images outline', 'f302'],
+  ['keyboard outline', 'f11c'],
+  ['lemon outline', 'f094'],
+  ['life ring outline', 'f1cd'],
+  ['lightbulb outline', 'f0eb'],
+  ['list alternate outline', 'f022'],
+  ['map outline', 'f279'],
+  ['meh outline', 'f11a'],
+  ['minus square outline', 'f146'],
+  ['money bill alternate outline', 'f3d1'],
+  ['moon outline', 'f186'],
+  ['newspaper outline', 'f1ea'],
+  ['object group outline', 'f247'],
+  ['object ungroup outline', 'f248'],
+  ['paper plane outline', 'f1d8'],
+  ['pause circle outline', 'f28b'],
+  ['play circle outline', 'f144'],
+  ['plus square outline', 'f0fe'],
+  ['question circle outline', 'f059'],
+  ['registered outline', 'f25d'],
+  ['save outline', 'f0c7'],
+  ['share square outline', 'f14d'],
+  ['smile outline', 'f118'],
+  ['snowflake outline', 'f2dc'],
+  ['square outline', 'f0c8'],
+  ['star outline', 'f005'],
+  ['star half outline', 'f089'],
+  ['sticky note outline', 'f249'],
+  ['stop circle outline', 'f28d'],
+  ['sun outline', 'f185'],
+  ['thumbs down outline', 'f165'],
+  ['thumbs up outline', 'f164'],
+  ['times circle outline', 'f057'],
+  ['trash alternate outline', 'f2ed'],
+  ['user outline', 'f007'],
+  ['user circle outline', 'f2bd'],
+  ['window close outline', 'f410'],
+  ['window maximize outline', 'f2d0'],
+  ['window minimize outline', 'f2d1'],
+  ['window restore outline', 'f2d2'],
+  ['disk outline', 'f369'],
+
+  // Outline Aliases
+  ['heart empty', 'f004'],
+  ['star empty', 'f089'],
+])
+
+export default name => fontAwesomeIcons.get(name)
+
+/**
+ * TODO We should probably declare a @fontface rule here
+ */
diff --git a/src/themes/teams-high-contrast/components/Icon/iconStyles.ts b/src/themes/teams-high-contrast/components/Icon/iconStyles.ts
new file mode 100644
index 0000000000..80b009ed84
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Icon/iconStyles.ts
@@ -0,0 +1,131 @@
+import fontAwesomeIcons from './fontAwesomeIconStyles'
+import { callable } from '../../../../lib'
+import { disabledStyle, fittedStyle } from '../../../../styles/customCSS'
+import { FontIconSpec, IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
+import { ResultOf } from '../../../../../types/utils'
+import { IconXSpacing, IIconProps } from '../../../../components/Icon/Icon'
+
+import { getStyle as getSvgStyle } from './svg'
+
+const sizes = new Map([
+  ['micro', 0.3],
+  ['mini', 0.4],
+  ['tiny', 0.5],
+  ['small', 0.75],
+  ['normal', 1],
+  ['large', 1.5],
+  ['big', 2],
+  ['huge', 4],
+  ['massive', 8],
+])
+
+const getDefaultFontIcon = (iconName: string) => {
+  const fontFamily = iconName && iconName.includes('outline') ? 'outline-icons' : 'Icons'
+  const content = (iconName && `'\\${fontAwesomeIcons(iconName)}'`) || '?'
+
+  return { content, fontFamily }
+}
+
+const getSize = size => `${sizes.get(size)}em`
+
+const getFontStyles = (iconName: string, themeIcon?: ResultOf<FontIconSpec>): ICSSInJSStyle => {
+  const { fontFamily, content } = themeIcon || getDefaultFontIcon(iconName)
+
+  return {
+    fontFamily,
+    width: '1.18em',
+    fontStyle: 'normal',
+    fontWeight: 400,
+    textDecoration: 'inherit',
+    textAlign: 'center',
+
+    '-webkit-font-smoothing': 'antialiased',
+    '-moz-osx-font-smoothing': 'grayscale',
+    backfaceVisibility: 'hidden',
+
+    lineHeight: 1,
+
+    '::before': {
+      content,
+      boxSizing: 'inherit',
+      background: '0 0',
+    },
+  }
+}
+
+const getXSpacingStyles = (xSpacing: IconXSpacing, horizontalSpace: string): ICSSInJSStyle => {
+  switch (xSpacing) {
+    case 'none':
+      return fittedStyle
+    case 'before':
+      return { ...fittedStyle, marginLeft: horizontalSpace }
+    case 'after':
+      return { ...fittedStyle, marginRight: horizontalSpace }
+    case 'both':
+      return { ...fittedStyle, margin: `0 ${horizontalSpace}` }
+  }
+}
+
+const getBorderedStyles = (isFontBased, circular, borderColor, color): ICSSInJSStyle => {
+  return {
+    ...getPaddedStyle(isFontBased),
+
+    // TODO: "black" here should actually match the Icon's fill or text color
+    boxShadow: `0 0 0 0.05em ${borderColor || color || 'black'} inset`,
+    ...(circular ? { borderRadius: '50%' } : {}),
+  }
+}
+
+const getPaddedStyle = (isFontBased: boolean): ICSSInJSStyle => ({
+  padding: `0.5em ${isFontBased ? 0 : '0.5em'}`,
+  width: '2em',
+  height: '2em',
+})
+
+const iconStyles: IComponentPartStylesInput<IIconProps, any> = {
+  root: ({
+    props: { disabled, name, size, bordered, circular, xSpacing },
+    variables: v,
+    theme,
+  }): ICSSInJSStyle => {
+    const iconSpec = theme.icons[name]
+    const isFontBased = !iconSpec || !iconSpec.isSvg
+
+    return {
+      display: 'inline-block',
+      fontSize: getSize(size),
+
+      width: '1em',
+      height: '1em',
+
+      ...(isFontBased &&
+        getFontStyles(name, callable(iconSpec && (iconSpec.icon as FontIconSpec))())),
+
+      ...(isFontBased && { color: v.color }),
+      backgroundColor: v.backgroundColor,
+
+      opacity: 1,
+      margin: v.margin,
+
+      speak: 'none',
+
+      verticalAlign: 'middle',
+      overflow: 'hidden',
+
+      ...getXSpacingStyles(xSpacing, v.horizontalSpace),
+
+      ...((bordered || v.borderColor || circular) &&
+        getBorderedStyles(isFontBased, circular, v.borderColor, v.color)),
+
+      ...(disabled && disabledStyle),
+    }
+  },
+
+  svg: getSvgStyle('svg'),
+
+  g: getSvgStyle('g'),
+
+  /* additional SVG styles for different paths could be added/used in the same way */
+}
+
+export default iconStyles
diff --git a/src/themes/teams-high-contrast/components/Icon/iconVariables.ts b/src/themes/teams-high-contrast/components/Icon/iconVariables.ts
new file mode 100644
index 0000000000..a2c58b3d07
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Icon/iconVariables.ts
@@ -0,0 +1,21 @@
+import { pxToRem } from '../../../../lib'
+
+export interface IconVariables {
+  [key: string]: string | number | undefined
+
+  color?: string
+  backgroundColor?: string
+  borderColor?: string
+  horizontalSpace: string
+  margin: string
+}
+
+export default (): IconVariables => ({
+  color: undefined,
+  // TODO move initial variable discovery to JSON files
+  // similar to how components have an info.json file
+  backgroundColor: undefined,
+  borderColor: undefined,
+  horizontalSpace: pxToRem(10),
+  margin: '0 0.25em 0 0',
+})
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/call.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/call.tsx
new file mode 100644
index 0000000000..cd16790278
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Icon/svg/icons/call.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default {
+  icon: ({ classes }) => (
+    <svg viewBox="0 0 32 32" role="presentation" focusable="false" className={classes.svg}>
+      <g>
+        <path
+          d="M19.5,23c-0.1,0-0.3,0-0.4-0.1c-2.6-0.8-4.8-2.4-6.4-4.6l0,0c-1.6-2.2-2.3-4.9-2.1-7.6c0-0.6,0.4-1.1,0.9-1.3l0.8-0.4
+                        c0.9-0.4,1.9,0,2.3,0.8l0.3,0.7c0.5,1,0.8,2.5-0.1,3.4l-0.6,0.6c-0.2,0.2-0.2,0.5-0.1,0.7l1.9,2.8c0.1,0.2,0.4,0.3,0.6,0.2l0.7-0.3
+                        c1.3-0.5,2.6,0.3,3.3,1.1l0.5,0.5c0.6,0.7,0.6,1.8,0,2.4l-0.6,0.7C20.3,22.9,19.9,23,19.5,23z M13.5,17.8c1.4,2,3.5,3.5,5.8,4.2
+                        c0.2,0.1,0.4,0,0.5-0.1l0.6-0.7c0.3-0.3,0.3-0.8,0-1.1L20,19.6c-0.6-0.6-1.4-1.1-2.2-0.8l-0.7,0.3c-0.7,0.3-1.5,0.1-1.9-0.5
+                        l-1.9-2.8c-0.4-0.6-0.4-1.4,0.2-1.9l0.5-0.6c0.5-0.6,0.3-1.6-0.1-2.3l-0.3-0.7c-0.2-0.4-0.6-0.5-1-0.4l-0.8,0.4
+                        c-0.2,0.1-0.3,0.3-0.3,0.5C11.4,13.4,12.1,15.8,13.5,17.8L13.5,17.8z"
+        />
+        <path
+          d="M19.5,23c-0.1,0-0.3,0-0.4-0.1c-2.6-0.8-4.8-2.4-6.4-4.6l0,0c-1.6-2.2-2.3-4.9-2.1-7.6c0-0.6,0.4-1.1,0.9-1.3L12.3,9
+                        c0.9-0.4,1.9,0,2.3,0.8l0.3,0.7c0.5,1,0.8,2.5-0.1,3.4l-0.6,0.6C14,14.7,14,15,14.1,15.2L16,18c0.1,0.2,0.4,0.3,0.6,0.2l0.7-0.3
+                        c1.3-0.5,2.6,0.3,3.3,1.1l0.5,0.5c0.6,0.7,0.6,1.8,0,2.4l-0.6,0.7C20.3,22.9,19.9,23,19.5,23z"
+        />
+      </g>
+    </svg>
+  ),
+  styles: {
+    svg: ({ props, variables }) => {
+      return {
+        fill: variables.color,
+      }
+    },
+  },
+} as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/callControlPresentNew.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/callControlPresentNew.tsx
new file mode 100644
index 0000000000..0a9e17e190
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Icon/svg/icons/callControlPresentNew.tsx
@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg viewBox="0 0 32 32" role="presentation">
+    <path
+      d="M22.5,9h-13C8.672852,9,8,9.672852,8,10.5v9C8,20.327148,8.672852,21,9.5,21H13c0.276367,0,0.5-0.223633,0.5-0.5
+            S13.276367,20,13,20H9.5C9.224121,20,9,19.775391,9,19.5v-9C9,10.224121,9.224121,10,9.5,10h13c0.275391,0,0.5,0.224121,0.5,0.5v9
+            c0,0.275391-0.224609,0.5-0.5,0.5H19c-0.276367,0-0.5,0.223633-0.5,0.5S18.723633,21,19,21h3.5c0.827148,0,1.5-0.672852,1.5-1.5v-9
+            C24,9.672852,23.327148,9,22.5,9z"
+    />
+    <path
+      d="M19,18c0.255859,0,0.511719-0.097656,0.707031-0.292969c0.390625-0.390625,0.390625-1.023438,0-1.414062
+            l-2.999695-2.999695c-0.092163-0.092285-0.20282-0.165344-0.325195-0.216064c-0.244507-0.101135-0.519775-0.101135-0.764282,0
+            c-0.122375,0.05072-0.233032,0.123779-0.325195,0.216064l-2.999695,2.999695c-0.390625,0.390625-0.390625,1.023438,0,1.414062
+            C12.488281,17.902344,12.744141,18,13,18s0.511719-0.097656,0.707031-0.292969L15,16.414062V22.5c0,0.552734,0.447754,1,1,1
+            s1-0.447266,1-1v-6.085938l1.292969,1.292969C18.488281,17.902344,18.744141,18,19,18z"
+    />
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/callControlStopPresentingNew.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/callControlStopPresentingNew.tsx
new file mode 100644
index 0000000000..e4b84b13d2
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Icon/svg/icons/callControlStopPresentingNew.tsx
@@ -0,0 +1,21 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg viewBox="0 0 32 32" role="presentation">
+    <path
+      d="M22.5,9h-13C8.672852,9,8,9.672852,8,10.5v9C8,20.327148,8.672852,21,9.5,21h2.006836c0.276367,0,0.5-0.223633,0.5-0.5
+                s-0.223633-0.5-0.5-0.5H9.5C9.224121,20,9,19.775391,9,19.5v-9C9,10.224121,9.224121,10,9.5,10h13c0.275391,0,0.5,0.224121,0.5,0.5
+                v9c0,0.275391-0.224609,0.5-0.5,0.5h-2.066406c-0.276367,0-0.5,0.223633-0.5,0.5s0.223633,0.5,0.5,0.5H22.5
+                c0.827148,0,1.5-0.672852,1.5-1.5v-9C24,9.672852,23.327148,9,22.5,9z"
+    />
+    <path
+      d="M19.207031,16.292969c-0.390625-0.390625-1.023438-0.390625-1.414062,0L16,18.085938l-1.792969-1.792969
+                c-0.390625-0.390625-1.023438-0.390625-1.414062,0s-0.390625,1.023438,0,1.414062L14.585938,19.5l-1.792969,1.792969
+                c-0.390625,0.390625-0.390625,1.023438,0,1.414062C12.988281,22.902344,13.244141,23,13.5,23s0.511719-0.097656,0.707031-0.292969
+                L16,20.914062l1.792969,1.792969C17.988281,22.902344,18.244141,23,18.5,23s0.511719-0.097656,0.707031-0.292969
+                c0.390625-0.390625,0.390625-1.023438,0-1.414062L17.414062,19.5l1.792969-1.792969
+                C19.597656,17.316406,19.597656,16.683594,19.207031,16.292969z"
+    />
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/callEnd.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/callEnd.tsx
new file mode 100644
index 0000000000..c266dba22b
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Icon/svg/icons/callEnd.tsx
@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg role="presentation" viewBox="0 0 32 32">
+    <path
+      d="M23.4,15.6C21.3,13.9,18.7,13,16,13s-5.3,0.9-7.4,2.6C8.1,16,7.9,16.5,8,17.1c0,0.1,0.2,0.5,0.2,0.5
+                c0.4,0.6,0.9,1.4,1.9,1.2l0.7-0.1c1.1-0.2,2.5-0.8,2.7-2.1l0.2-1.1l4.2,0l0.2,1.1c0.3,1.3,1.7,1.9,2.7,2l0.7,0.1c0.1,0,0.2,0,0.2,0
+                c0.7,0,1.1-0.5,1.5-1c0,0,0.4-0.7,0.4-0.7C24.1,16.5,23.9,16,23.4,15.6z"
+    />
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/callIncomingVideo.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/callIncomingVideo.tsx
new file mode 100644
index 0000000000..38dd12913f
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Icon/svg/icons/callIncomingVideo.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg viewBox="0 0 32 32" role="presentation">
+    <g>
+      <path d="M23.6968,12.0403c-0.1836-0.0786-0.3975-0.04-0.542,0.0981l-2.5317,2.4165C20.2212,14.9382,20,15.4514,20,16  c0,0.5483,0.2212,1.0615,0.623,1.4448l2.5317,2.4167C23.2495,19.9521,23.374,20,23.5,20c0.0664,0,0.1333-0.0132,0.1968-0.0403  C23.8809,19.8809,24,19.7002,24,19.5v-7C24,12.2998,23.8809,12.1191,23.6968,12.0403z M23,18.3315l-1.6865-1.6099v-0.0002  C21.1113,16.5286,21,16.2725,21,16s0.1113-0.5286,0.3135-0.7217L23,13.6685V18.3315z" />
+      <path d="M17.5,11H9.8193c-0.7056,0-1.3232,0.5393-1.4692,1.2822C8.1177,13.4619,8,14.7129,8,16s0.1177,2.5381,0.3501,3.7173  C8.4961,20.4607,9.1138,21,9.8193,21H17.5c0.8271,0,1.5-0.6729,1.5-1.5v-7C19,11.6729,18.3271,11,17.5,11z M18,19.5  c0,0.2756-0.2241,0.5-0.5,0.5H9.8193c-0.2285,0-0.4341-0.2-0.4878-0.4756C9.1113,18.4082,9,17.2224,9,16  s0.1113-2.4082,0.3315-3.5249C9.3853,12.2,9.5908,12,9.8193,12H17.5c0.2759,0,0.5,0.2244,0.5,0.5V19.5z" />
+      <path d="M23.6968,12.0403c-0.1841-0.0786-0.3975-0.04-0.542,0.0981l-2.5317,2.4165C20.2212,14.9382,20,15.4514,20,16  c0,0.5483,0.2212,1.0615,0.623,1.4448l2.5317,2.4167C23.2495,19.9521,23.374,20,23.5,20c0.0664,0,0.1333-0.0132,0.1968-0.0403  C23.8809,19.8809,24,19.7002,24,19.5v-7C24,12.2998,23.8809,12.1191,23.6968,12.0403z" />
+      <path d="M17.5,11H9.8193c-0.7056,0-1.3232,0.5393-1.4692,1.2822C8.1177,13.4619,8,14.7129,8,16s0.1177,2.5381,0.3501,3.7173  C8.4961,20.4607,9.1138,21,9.8193,21H17.5c0.8271,0,1.5-0.6729,1.5-1.5v-7C19,11.6729,18.3271,11,17.5,11z" />
+    </g>
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/callIncomingVideoOff.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/callIncomingVideoOff.tsx
new file mode 100644
index 0000000000..59e9cbf9ae
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Icon/svg/icons/callIncomingVideoOff.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg role="presentation" viewBox="-4 -4 40 40">
+    <path
+      d="M26,6.5859c0,0.1694-0.0615,0.3159-0.1855,0.4395L19.75,13.0996v7.2363c0,0.2539-0.0508,0.4941-0.1514,0.7227
+              s-0.2363,0.4258-0.4053,0.5957s-0.3682,0.3047-0.5957,0.4053s-0.4688,0.1514-0.7227,0.1514h-7.2363l-3.5742,3.5645
+              c-0.124,0.123-0.2705,0.1855-0.4395,0.1855s-0.3154-0.0625-0.4395-0.1855S6,25.5059,6,25.3359s0.0615-0.3164,0.1855-0.4395
+              l18.75-18.75c0.124-0.1235,0.2705-0.1855,0.4395-0.1855s0.3154,0.062,0.4395,0.1855S26,6.4165,26,6.5859z M19.0469,10.1406
+              l-0.8984,0.8887c-0.0908-0.0454-0.1826-0.0684-0.2734-0.0684H8.2754c-0.1885,0-0.3438,0.1074-0.4639,0.3223
+              s-0.2197,0.4917-0.2979,0.8301s-0.1348,0.7129-0.1709,1.123s-0.0605,0.8105-0.0732,1.2012S7.25,15.186,7.25,15.5117
+              s0,0.5664,0,0.7227c0,0.1304,0.002,0.3335,0.0049,0.6104c0.0029,0.2764,0.0127,0.5869,0.0293,0.9326s0.042,0.6992,0.0781,1.0645
+              s0.0908,0.7012,0.166,1.0107s0.1689,0.5654,0.2832,0.7666s0.2559,0.3125,0.4248,0.332l-0.9473,0.9473
+              c-0.2217-0.1504-0.4072-0.3662-0.5566-0.6494s-0.2715-0.6045-0.3662-0.9619s-0.168-0.7373-0.2197-1.1377
+              s-0.0879-0.7959-0.1074-1.1865s-0.0312-0.7598-0.0342-1.1084C6.002,16.5063,6,16.2085,6,15.9609
+              c0-0.3843,0.0029-0.7729,0.0098-1.167s0.0244-0.7861,0.0537-1.1768s0.0732-0.7798,0.1318-1.167s0.1396-0.7666,0.2441-1.1377
+              c0.0586-0.2212,0.1416-0.4297,0.249-0.625s0.2373-0.3647,0.3906-0.5078s0.3291-0.2573,0.5273-0.3418s0.4219-0.127,0.6689-0.127
+              h9.5996c0.2148,0,0.4229,0.0376,0.625,0.1123S18.8838,10.0039,19.0469,10.1406z M18.5,20.3359v-5.9863l-6.6113,6.6113h5.9863
+              c0.1689,0,0.3154-0.0625,0.4395-0.1855S18.5,20.5059,18.5,20.3359z M26,20.3359c0,0.1699-0.0615,0.3164-0.1855,0.4395
+              s-0.2705,0.1855-0.4395,0.1855s-0.3125-0.0586-0.4297-0.1758l-3.1641-3.0176c-0.2471-0.2344-0.4395-0.5098-0.5762-0.8252
+              C21.0684,16.6265,21,16.2993,21,15.9609s0.0684-0.6655,0.2051-0.9814s0.3291-0.5908,0.5762-0.8252l3.1641-3.0176
+              c0.1172-0.1172,0.2607-0.1758,0.4297-0.1758s0.3154,0.062,0.4395,0.1855S26,11.4165,26,11.5859V20.3359z M24.75,18.8711v-5.8203
+              l-2.1094,2.0117c-0.124,0.1108-0.2197,0.2456-0.2881,0.4053S22.25,15.7915,22.25,15.9609s0.0342,0.3335,0.1025,0.4932
+              s0.1641,0.2944,0.2881,0.4053L24.75,18.8711z"
+    />
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/callMicrophone.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/callMicrophone.tsx
new file mode 100644
index 0000000000..0647f2f9ef
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Icon/svg/icons/callMicrophone.tsx
@@ -0,0 +1,39 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg role="presentation" viewBox="0 0 40 40">
+    <path
+      d="M27.5,20.0002441c0,1.2558594-0.3085938,2.4482422-0.9277344,3.5742188
+            c-0.2988281,0.5341797-0.65625,1.0253906-1.0742188,1.4746094c-0.4160156,0.4492188-0.8789062,0.8466797-1.3867188,1.1914062
+            c-0.5136719,0.3447266-1.0664062,0.6230469-1.6552734,0.8349609s-1.1992188,0.34375-1.8310547,0.3955078v1.9042969
+            c0,0.1689453-0.0615234,0.3154297-0.1855469,0.4394531C20.3164062,29.9387207,20.1699219,30.0002441,20,30.0002441
+            c-0.1694336,0-0.315918-0.0615234-0.4394531-0.1855469S19.375,29.5441895,19.375,29.3752441v-1.9042969
+            c-0.6313477-0.0517578-1.2416992-0.1835938-1.8310547-0.3955078s-1.1411133-0.4902344-1.6552734-0.8349609
+            c-0.5078125-0.3447266-0.9702148-0.7441406-1.3867188-1.1962891s-0.7714844-0.9423828-1.0644531-1.4697266
+            c-0.2993164-0.5400391-0.5307617-1.1132812-0.6933594-1.71875S12.5,20.6311035,12.5,20.0002441
+            c0-0.1699219,0.0620117-0.3164062,0.1855469-0.4399414s0.2700195-0.1855469,0.4394531-0.1855469
+            s0.315918,0.0620117,0.4394531,0.1855469S13.75,19.8303223,13.75,20.0002441c0,1.1191406,0.2866211,2.1650391,0.859375,3.1347656
+            c0.2734375,0.4619141,0.6020508,0.8857422,0.9863281,1.2695312s0.8071289,0.7128906,1.2695312,0.9863281
+            c0.9702148,0.5732422,2.0151367,0.859375,3.1347656,0.859375c1.1201172,0,2.1650391-0.2861328,3.1347656-0.859375
+            c0.4628906-0.2734375,0.8867188-0.6025391,1.2695312-0.9863281c0.3847656-0.3837891,0.7128906-0.8076172,0.9863281-1.2695312
+            C25.9648438,22.1652832,26.25,21.1193848,26.25,20.0002441c0-0.1699219,0.0625-0.3164062,0.1855469-0.4399414
+            c0.125-0.1235352,0.2714844-0.1855469,0.4394531-0.1855469c0.1699219,0,0.3164062,0.0620117,0.4394531,0.1855469
+            C27.4394531,19.6838379,27.5,19.8303223,27.5,20.0002441z M23.75,13.7497559v6.2504883
+            c0,0.5009766-0.0976562,0.9794922-0.2929688,1.4355469c-0.1953125,0.4550781-0.4648438,0.8564453-0.8105469,1.2011719
+            c-0.3515625,0.3515625-0.7548828,0.625-1.2109375,0.8203125C20.9804688,23.6525879,20.5019531,23.7502441,20,23.7502441
+            c-0.5014648,0-0.9780273-0.0976562-1.4306641-0.2929688s-0.8544922-0.46875-1.2060547-0.8203125
+            s-0.625-0.7539062-0.8203125-1.2060547C16.3476562,20.9777832,16.25,20.5012207,16.25,20.0002441v-6.2504883
+            c0-0.5014648,0.0976562-0.9799805,0.2929688-1.4355469s0.46875-0.859375,0.8203125-1.2109375
+            c0.3452148-0.3452148,0.7456055-0.6152344,1.2011719-0.8105469S19.4985352,9.9997559,20,9.9997559
+            c0.5019531,0,0.9814453,0.0976562,1.4404297,0.2929688s0.8613281,0.465332,1.2060547,0.8105469
+            c0.3457031,0.3452148,0.6152344,0.7470703,0.8105469,1.2060547S23.75,13.248291,23.75,13.7497559z M22.5,20.0002441v-6.2504883
+            c0-0.3320312-0.0644531-0.6494141-0.1953125-0.9521484c-0.1298828-0.3027344-0.3125-0.5712891-0.546875-0.8056641
+            s-0.5029297-0.4165039-0.8056641-0.546875S20.3320312,11.2497559,20,11.2497559s-0.6494141,0.0649414-0.9521484,0.1953125
+            s-0.5712891,0.3125-0.8056641,0.546875s-0.4165039,0.5029297-0.546875,0.8056641S17.5,13.4177246,17.5,13.7497559v6.2504883
+            c0,0.3320312,0.0649414,0.6494141,0.1953125,0.9521484s0.3125,0.5712891,0.546875,0.8056641s0.5029297,0.4169922,0.8056641,0.546875
+            S19.6679688,22.5002441,20,22.5002441s0.6494141-0.0654297,0.9521484-0.1953125s0.5712891-0.3125,0.8056641-0.546875
+            s0.4169922-0.5029297,0.546875-0.8056641C22.4355469,20.6496582,22.5,20.3322754,22.5,20.0002441z"
+    />
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/callMicrophoneOff.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/callMicrophoneOff.tsx
new file mode 100644
index 0000000000..9bffeb36a1
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Icon/svg/icons/callMicrophoneOff.tsx
@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg role="presentation" viewBox="-4 -4 40 40">
+    <path
+      d="M26,6.625c0,0.1694-0.0615,0.3159-0.1855,0.4395L19.75,13.1387V16c0,0.5078-0.0996,0.9897-0.2979,1.4453
+                c-0.1982,0.4551-0.4688,0.8545-0.8105,1.1963s-0.7402,0.6123-1.1963,0.8105S16.5078,19.75,16,19.75
+                c-0.3906,0-0.7715-0.0605-1.1426-0.1807s-0.7129-0.2939-1.0254-0.5225l-1.7773,1.7871c0.5537,0.4492,1.1699,0.7969,1.8506,1.0449
+                S15.2842,22.25,16,22.25c0.5664,0,1.1152-0.0742,1.6455-0.2246s1.0273-0.3613,1.4893-0.6348s0.8857-0.6016,1.2695-0.9863
+                s0.7129-0.8066,0.9863-1.2695s0.4854-0.959,0.6348-1.4893S22.25,16.5664,22.25,16c0-0.1694,0.0615-0.3159,0.1855-0.4395
+                s0.2705-0.1855,0.4395-0.1855s0.3154,0.062,0.4395,0.1855S23.5,15.8306,23.5,16c0,0.6445-0.0811,1.2676-0.2441,1.8701
+                s-0.3926,1.1719-0.6885,1.709s-0.6523,1.0322-1.0693,1.4844s-0.8789,0.8486-1.3867,1.1865s-1.0566,0.6133-1.6455,0.8252
+                s-1.2031,0.3428-1.8408,0.3955v1.9043c0,0.1699-0.0615,0.3164-0.1855,0.4395S16.1689,26,16,26s-0.3154-0.0625-0.4395-0.1855
+                s-0.1855-0.2695-0.1855-0.4395v-1.9141c-0.7744-0.0645-1.5215-0.248-2.2412-0.5469s-1.375-0.6992-1.9678-1.2012l-4.1016,4.1016
+                C6.9404,25.9375,6.7939,26,6.625,26s-0.3154-0.0625-0.4395-0.1855S6,25.5449,6,25.375s0.0615-0.3164,0.1855-0.4395l18.75-18.75
+                C25.0596,6.062,25.2061,6,25.375,6s0.3154,0.062,0.4395,0.1855S26,6.4556,26,6.625z M10.4336,18.8125l-0.9277,0.918
+                c-0.3252-0.5664-0.5742-1.166-0.7471-1.7969S8.5,16.6577,8.5,16c0-0.1694,0.0615-0.3159,0.1855-0.4395S8.9561,15.375,9.125,15.375
+                s0.3154,0.062,0.4395,0.1855S9.75,15.8306,9.75,16c0,0.4883,0.0566,0.9702,0.1709,1.4453
+                C10.0352,17.9199,10.2061,18.377,10.4336,18.8125z M19.7305,9.5059L18.5,10.7363V9.75c0-0.3384-0.0664-0.6592-0.2002-0.9619
+                s-0.3145-0.5679-0.542-0.7959s-0.4932-0.4087-0.7959-0.542S16.3389,7.25,16,7.25s-0.6592,0.0669-0.9619,0.2002
+                s-0.5684,0.314-0.7959,0.542s-0.4082,0.4932-0.542,0.7959S13.5,9.4116,13.5,9.75v5.9863l-1.1328,1.1426
+                C12.2891,16.5991,12.25,16.3062,12.25,16V9.75c0-0.5078,0.0996-0.9897,0.2979-1.4453s0.4688-0.8545,0.8105-1.1963
+                s0.7402-0.6118,1.1963-0.8105S15.4922,6,16,6c0.4883,0,0.9502,0.0913,1.3867,0.2734s0.8232,0.4331,1.1621,0.752
+                s0.6123,0.6899,0.8203,1.1133S19.6982,9.0176,19.7305,9.5059z M18.5,16v-1.6113l-3.7695,3.7598
+                c0.1885,0.1113,0.3926,0.1973,0.6104,0.2588S15.7783,18.5,16,18.5c0.3389,0,0.6592-0.0664,0.9619-0.2002
+                s0.5684-0.3135,0.7959-0.542s0.4082-0.4932,0.542-0.7959S18.5,16.3384,18.5,16z"
+    />
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/index.ts b/src/themes/teams-high-contrast/components/Icon/svg/icons/index.ts
new file mode 100644
index 0000000000..3298f956ec
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Icon/svg/icons/index.ts
@@ -0,0 +1,27 @@
+import { TeamsSvgIconSpec } from '../types'
+
+import call from './call'
+import callEnd from './callEnd'
+import callVideo from './callIncomingVideo'
+import callVideoOff from './callIncomingVideoOff'
+import callStartPresenting from './callControlPresentNew'
+import callStopPresenting from './callControlStopPresentingNew'
+import callMicrophone from './callMicrophone'
+import callMicrophoneOff from './callMicrophoneOff'
+import more from './more'
+import teamCreate from './teamCreate'
+import umbrella from './umbrella'
+
+export default {
+  call,
+  'call-end': callEnd,
+  'call-video': callVideo,
+  'call-video-off': callVideoOff,
+  'call-start-presenting': callStartPresenting,
+  'call-stop-presenting': callStopPresenting,
+  'call-microphone': callMicrophone,
+  'call-microphone-off': callMicrophoneOff,
+  more,
+  'team-create': teamCreate,
+  umbrella,
+} as { [iconName: string]: TeamsSvgIconSpec }
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/more.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/more.tsx
new file mode 100644
index 0000000000..1b53b7481d
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Icon/svg/icons/more.tsx
@@ -0,0 +1,16 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg viewBox="0 0 32 32" role="presentation" focusable="false">
+    <g>
+      <circle cx="22" cy="16" r="2" />
+      <circle cx="16" cy="16" r="2" />
+      <circle cx="10" cy="16" r="2" />
+
+      <circle cx="22" cy="16" r="1.5" />
+      <circle cx="16" cy="16" r="1.5" />
+      <circle cx="10" cy="16" r="1.5" />
+    </g>
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/teamCreate.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/teamCreate.tsx
new file mode 100644
index 0000000000..e96ff59678
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Icon/svg/icons/teamCreate.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default (
+  <svg viewBox="0 0 32 32" role="presentation" focusable="false">
+    <g>
+      <path
+        d="M10,11c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S11.1,11,10,11z M10,14c-0.6,0-1-0.4-1-1s0.4-1,1-1s1,0.4,1,1S10.6,14,10,14zM16,14c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S14.9,14,16,14z M16,11c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S15.4,11,16,11zM13,20c0,1.3,1.2,2,3,2c1.9,0,3-0.7,3-2v-5h-6V20z M14,16h4v4c0,1-1.7,1.1-2,1.1S14,21,14,20V16zM11.5,17c0.3,0,0.5-0.2,0.5-0.5c0-0.3-0.2-0.5-0.5-0.5H8v3c0,1.3,1.1,2,3,2h0.5c0.3,0,0.5-0.2,0.5-0.5
+                c0-0.3-0.2-0.5-0.5-0.5H11C10.7,20,9,20,9,19v-2H11.5zM23.5,10H22V8.5C22,8.2,21.8,8,21.5,8S21,8.2,21,8.5V10h-1.5c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5H21v1.5
+                c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V11h1.5c0.3,0,0.5-0.2,0.5-0.5S23.8,10,23.5,10z"
+      />
+      <path
+        d="M10,11c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S11.1,11,10,11z
+                M16,14c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S14.9,14,16,14z
+                M11.5,16H8v3c0,1.3,1.1,2,3,2h0.5c0.3,0,0.5-0.2,0.5-0.5v-4C12,16.2,11.8,16,11.5,16z
+                M13,20c0,1.3,1.2,2,3,2c1.9,0,3-0.7,3-2v-5h-6V20z
+                M23.5,10H22V8.5C22,8.2,21.8,8,21.5,8S21,8.2,21,8.5V10h-1.5c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5H21v1.5
+                c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V11h1.5c0.3,0,0.5-0.2,0.5-0.5S23.8,10,23.5,10z"
+      />
+    </g>
+  </svg>
+) as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/umbrella.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/umbrella.tsx
new file mode 100644
index 0000000000..1f3801584d
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Icon/svg/icons/umbrella.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react'
+import { TeamsSvgIconSpec } from '../types'
+
+export default {
+  icon: ({ classes }) => (
+    <svg className={classes.svg} viewBox="0 0 34 34">
+      <path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291 0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0 0.547 0.444 0.991 1 0.991 0.552 0 1-0.451 1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825 15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224 0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z" />
+    </svg>
+  ),
+  styles: {
+    svg: ({ variables: v }) => ({
+      fill: v.color,
+    }),
+  },
+} as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/index.ts b/src/themes/teams-high-contrast/components/Icon/svg/index.ts
new file mode 100644
index 0000000000..30bc887b4b
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Icon/svg/index.ts
@@ -0,0 +1,19 @@
+import svgIconsAndStyles from './icons'
+import { SvgIconSpecWithStyles, TeamsSvgIconSpec } from './types'
+
+export const getStyle = partName => {
+  return args => {
+    const { props } = args
+
+    const maybeIconSpec = svgIconsAndStyles[props.name]
+    const maybeIconStyles = maybeIconSpec && (maybeIconSpec as SvgIconSpecWithStyles).styles
+
+    if (maybeIconStyles && maybeIconStyles[partName]) {
+      return maybeIconStyles[partName](args)
+    }
+
+    return undefined
+  }
+}
+
+export default svgIconsAndStyles as { [iconName: string]: TeamsSvgIconSpec }
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/types.d.ts b/src/themes/teams-high-contrast/components/Icon/svg/types.d.ts
new file mode 100644
index 0000000000..6f2c2415c6
--- /dev/null
+++ b/src/themes/teams-high-contrast/components/Icon/svg/types.d.ts
@@ -0,0 +1,10 @@
+import { ComponentPartStyleFunction, SvgIconSpec } from '../../../../../../types/theme'
+import { ObjectOf } from '../../../../../../types/utils'
+import { IIconProps } from '../../../../../components/Icon/Icon'
+
+type SvgIconSpecWithStyles = {
+  icon: SvgIconSpec
+  styles: ObjectOf<ComponentPartStyleFunction<IIconProps, any>>
+}
+
+export type TeamsSvgIconSpec = SvgIconSpec | SvgIconSpecWithStyles
diff --git a/src/themes/teams-high-contrast/index.ts b/src/themes/teams-high-contrast/index.ts
new file mode 100644
index 0000000000..47cecb488a
--- /dev/null
+++ b/src/themes/teams-high-contrast/index.ts
@@ -0,0 +1,46 @@
+import {
+  FontIconSpec,
+  IThemeInput,
+  SvgIconSpec,
+  ThemeIcons,
+  ThemeIconSpec,
+} from '../../../types/theme'
+
+import * as siteVariables from './siteVariables'
+import * as componentVariables from './componentVariables'
+import * as componentStyles from './componentStyles'
+
+import { default as svgIconsAndStyles } from './components/Icon/svg'
+import { default as fontIcons } from './components/Icon/font'
+
+import { SvgIconSpecWithStyles, TeamsSvgIconSpec } from './components/Icon/svg/types'
+
+const declareSvg = (svgIcon: SvgIconSpec): ThemeIconSpec => ({
+  isSvg: true,
+  icon: svgIcon,
+})
+
+const declareFontBased = (fontIcon: FontIconSpec): ThemeIconSpec => ({ icon: fontIcon })
+
+const icons: ThemeIcons = Object.keys(svgIconsAndStyles as {
+  [iconName: string]: TeamsSvgIconSpec
+}).reduce<ThemeIcons>((accIcons, iconName) => {
+  const iconAndMaybeStyles = svgIconsAndStyles[iconName]
+
+  const icon: SvgIconSpec = (iconAndMaybeStyles as any).styles
+    ? (iconAndMaybeStyles as SvgIconSpecWithStyles).icon
+    : (iconAndMaybeStyles as SvgIconSpec)
+
+  return { ...accIcons, ...{ [iconName]: declareSvg(icon) } }
+}, {})
+
+Object.keys(fontIcons).forEach(iconName => {
+  icons[iconName] = declareFontBased(fontIcons[iconName])
+})
+
+export default {
+  siteVariables,
+  componentVariables,
+  componentStyles,
+  icons,
+} as IThemeInput
diff --git a/src/themes/teams-high-contrast/siteVariables.ts b/src/themes/teams-high-contrast/siteVariables.ts
new file mode 100644
index 0000000000..2349303d64
--- /dev/null
+++ b/src/themes/teams-high-contrast/siteVariables.ts
@@ -0,0 +1,93 @@
+import { pxToRem } from '../../lib'
+
+//
+// VARIABLES
+//
+export const htmlFontSize = '10px' // what 1rem represents
+
+//
+// COLORS
+//
+export const black = '#252423'
+export const gray02 = '#484644'
+export const gray03 = '#605E5C'
+export const gray04 = '#979593'
+export const gray06 = '#C8C6C4'
+export const gray08 = '#E1DFDD'
+export const gray09 = '#EDEBE9'
+export const gray10 = '#F3F2F1'
+export const gray14 = '#FAF9F8'
+export const fontBlack = black
+
+export const white = '#FFF'
+
+export const brand = '#6264A7'
+export const brand02 = '#33344A'
+export const brand04 = '#464775'
+export const brand06 = '#6264A7'
+export const brand08 = '#8B8CC7'
+export const brand12 = '#BDBDE6'
+export const brand14 = '#E2E2F6'
+export const brand16 = '#F4F4FC'
+
+export const orange04 = '#CC4A31'
+export const magenta = '#B24782'
+export const orchid = '#943670'
+export const red = '#C4314B'
+export const red08 = '#F3D6DB'
+export const yellow = '#F8D22A'
+export const green = '#92C353'
+export const green04 = '#237b4b'
+
+//
+// FONT SIZES
+//
+export const fontSizeX4 = pxToRem(72)
+export const fontSizeX3 = pxToRem(48)
+export const fontSizeX2 = pxToRem(36)
+export const fontSizeExtraLarge = pxToRem(24)
+export const fontSizeLarge = pxToRem(18)
+export const fontSizeMedium = pxToRem(14)
+export const fontSizeSmall = pxToRem(12)
+export const fontSizeExtraSmall = pxToRem(10)
+
+//
+// STATUS COLORS
+//
+export const successStatusBackgroundColor = green
+export const successStatusTextColor = white
+export const infoStatusBackgroundColor = 'blue'
+export const infoStatusTextColor = white
+export const warningStatusBackgroundColor = yellow
+export const warningStatusTextColor = white
+export const errorStatusBackgroundColor = red
+export const errorStatusTextColor = white
+export const unknownStatusBackgroundColor = gray04
+export const unknownStatusTextColor = white
+
+//
+// FONT WEIGHTS
+//
+export const fontWeightLight = 200
+export const fontWeightSemilight = 300
+export const fontWeightRegular = 400
+export const fontWeightSemibold = 600
+export const fontWeightBold = 700
+
+//
+// LINE HEIGHTS
+//
+export const lineHeightBase = 1.4286
+export const lineHeightSmall = 1.3333
+export const lineHeightExtraSmall = 1.2
+
+//
+// SEMANTIC ASSIGNMENTS
+//
+export const bodyPadding = 0
+export const bodyMargin = 0
+export const bodyFontFamily =
+  '"Segoe UI", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif'
+export const bodyFontSize = '1.4rem'
+export const bodyColor = black
+export const bodyLineHeight = lineHeightBase

From 3ed0545d7e5d1c45f33adc9a0fd78234a716ace1 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 26 Sep 2018 15:31:52 +0200
Subject: [PATCH 04/23] -fixed not needed re-rendering when the theme is not
 changed

---
 .../ComponentExample/ComponentExample.tsx            | 12 +++++++++---
 docs/src/components/Sidebar/Sidebar.tsx              |  4 ++--
 2 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index 8059c25c8e..2acf5d9e99 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -37,6 +37,7 @@ export interface IComponentExampleProps extends RouteComponentProps<any, any> {
 
 interface IComponentExampleState {
   knobs: Object
+  themeName: string
   componentVariables: Object
   exampleElement?: JSX.Element
   handleMouseLeave?: () => void
@@ -70,7 +71,7 @@ const codeTypeApiButtonLabels: { [key in SourceCodeType]: string } = {
   themeStore: appState.themeStore,
 }))
 @observer
-class ComponentExample extends React.PureComponent<IComponentExampleProps, IComponentExampleState> {
+class ComponentExample extends React.Component<IComponentExampleProps, IComponentExampleState> {
   private componentRef: React.Component
   private sourceCodeMgr: ISourceCodeManager
   private anchorName: string
@@ -79,6 +80,7 @@ class ComponentExample extends React.PureComponent<IComponentExampleProps, IComp
 
   public state: IComponentExampleState = {
     knobs: {},
+    themeName: 'teams',
     componentVariables: {},
     sourceCode: '',
     markup: '',
@@ -125,8 +127,6 @@ class ComponentExample extends React.PureComponent<IComponentExampleProps, IComp
 
   public componentWillReceiveProps(nextProps: IComponentExampleProps) {
     // deactivate examples when switching from one to the next
-    // TODO figure out when this should be invoked!
-    this.renderSourceCode()
     if (
       this.isActiveHash() &&
       this.isActiveState() &&
@@ -134,6 +134,12 @@ class ComponentExample extends React.PureComponent<IComponentExampleProps, IComp
     ) {
       this.clearActiveState()
     }
+    const {
+      themeStore: { themeName },
+    } = nextProps
+    if (this.state.themeName !== themeName) {
+      this.setState({ themeName: nextProps.themeStore.themeName }, this.renderSourceCode)
+    }
   }
 
   private clearActiveState = () => {
diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx
index b460c907f1..0fca11e4ec 100644
--- a/docs/src/components/Sidebar/Sidebar.tsx
+++ b/docs/src/components/Sidebar/Sidebar.tsx
@@ -19,6 +19,7 @@ const behaviorMenu = require('docs/src/behaviorMenu')
 
 const selectedItemLabelStyle: any = { color: '#35bdb2', float: 'right' }
 const selectedItemLabel = <span style={selectedItemLabelStyle}>Press Enter</span>
+const dropDownStyle: any = { borderRadius: '0px' }
 type ComponentMenuItem = { displayName: string; type: string }
 
 @inject((appState: AppStateStore) => ({
@@ -212,12 +213,11 @@ class Sidebar extends React.Component<any, any> {
             <Dropdown
               placeholder="Select theme..."
               fluid
-              inverted
               selection
               defaultValue={themeName}
               options={this.getThemeOptions()}
               onChange={this.handleThemeChange}
-              style={{ borderRadius: '0px' }}
+              style={dropDownStyle}
             />
           </Form>
         </Menu.Item>

From 27cf9d1474ac7ca67382335f109a2f1469b15fa0 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 26 Sep 2018 15:44:26 +0200
Subject: [PATCH 05/23] -simplifying the high contrast theme

---
 .../teams-high-contrast/componentStyles.ts    |   1 -
 .../teams-high-contrast/componentVariables.ts |   1 -
 .../components/Button/buttonGroupStyles.ts    |  32 -----
 .../components/Button/buttonStyles.ts         | 109 ------------------
 .../components/Button/buttonVariables.ts      |  52 ---------
 5 files changed, 195 deletions(-)
 delete mode 100644 src/themes/teams-high-contrast/components/Button/buttonGroupStyles.ts

diff --git a/src/themes/teams-high-contrast/componentStyles.ts b/src/themes/teams-high-contrast/componentStyles.ts
index 65da5ff33c..7b50231161 100644
--- a/src/themes/teams-high-contrast/componentStyles.ts
+++ b/src/themes/teams-high-contrast/componentStyles.ts
@@ -1,4 +1,3 @@
 export { default as Button } from './components/Button/buttonStyles'
-export { default as ButtonGroup } from './components/Button/buttonGroupStyles'
 
 export { default as Icon } from './components/Icon/iconStyles'
diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts
index c591479ea1..ab16243c62 100644
--- a/src/themes/teams-high-contrast/componentVariables.ts
+++ b/src/themes/teams-high-contrast/componentVariables.ts
@@ -1,4 +1,3 @@
 export { default as Button } from './components/Button/buttonVariables'
-export { default as ButtonGroup } from './components/Button/buttonVariables'
 
 export { default as Icon } from './components/Icon/iconVariables'
diff --git a/src/themes/teams-high-contrast/components/Button/buttonGroupStyles.ts b/src/themes/teams-high-contrast/components/Button/buttonGroupStyles.ts
deleted file mode 100644
index e0d790cb3b..0000000000
--- a/src/themes/teams-high-contrast/components/Button/buttonGroupStyles.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
-import { IButtonGroupProps } from '../../../../components/Button/ButtonGroup'
-
-const commonButtonsStyles = (circular: boolean) => ({
-  ...(!circular && {
-    margin: '0px',
-    borderRadius: '0px',
-  }),
-})
-
-const buttonGroupStyles: IComponentPartStylesInput<IButtonGroupProps, any> = {
-  root: (): ICSSInJSStyle => ({}),
-  middleButton: ({ props: p }) => ({
-    ...commonButtonsStyles(p.circular),
-  }),
-  firstButton: ({ props: p, variables: v }) => ({
-    ...commonButtonsStyles(p.circular),
-    ...(!p.circular && {
-      borderTopLeftRadius: v.borderRadius,
-      borderBottomLeftRadius: v.borderRadius,
-    }),
-  }),
-  lastButton: ({ props: p, variables: v }) => ({
-    ...commonButtonsStyles(p.circular),
-    ...(!p.circular && {
-      borderTopRightRadius: v.borderRadius,
-      borderBottomRightRadius: v.borderRadius,
-    }),
-  }),
-}
-
-export default buttonGroupStyles
diff --git a/src/themes/teams-high-contrast/components/Button/buttonStyles.ts b/src/themes/teams-high-contrast/components/Button/buttonStyles.ts
index 9ba83dc444..c87b2fea4e 100644
--- a/src/themes/teams-high-contrast/components/Button/buttonStyles.ts
+++ b/src/themes/teams-high-contrast/components/Button/buttonStyles.ts
@@ -1,7 +1,6 @@
 import { pxToRem } from '../../../../lib'
 import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
 import { IButtonProps } from '../../../../components/Button/Button'
-import { truncateStyle } from '../../../../styles/customCSS'
 
 const buttonStyles: IComponentPartStylesInput<IButtonProps, any> = {
   root: ({ props, variables }): ICSSInJSStyle => {
@@ -47,80 +46,26 @@ const buttonStyles: IComponentPartStylesInput<IButtonProps, any> = {
     } = variables
 
     return {
-      height,
-      minWidth,
-      maxWidth,
       color,
       backgroundColor,
-      borderRadius,
-      display: 'inline-flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      position: 'relative',
-      padding: `0 ${pxToRem(paddingLeftRightValue)}`,
-      margin: `0 ${pxToRem(8)} 0 0`,
-      verticalAlign: 'middle',
-      cursor: 'pointer',
 
       ...(!text && {
-        borderWidth: `${secondary ? (circular ? 1 : 2) : 0}px`,
         ':hover': {
           backgroundColor: backgroundColorHover,
         },
       }),
 
-      ...(text && {
-        backgroundColor: 'transparent',
-        borderColor: 'transparent',
-        ':hover': {
-          color: typeTextColorHover,
-        },
-      }),
-
       ...(primary &&
         !text && {
           color: typePrimaryColor,
           backgroundColor: typePrimaryBackgroundColor,
           border: `${pxToRem(1)} solid ${typePrimaryBorderColor}`,
-          ':active': {
-            backgroundColor: typePrimaryBackgroundColorActive,
-          },
           ':hover': {
             color: typePrimaryColor,
             backgroundColor: typePrimaryBackgroundColorHover,
           },
         }),
 
-      ...(primary &&
-        !text &&
-        !circular && {
-          outline: 0,
-          ':focus': {
-            ...(isFromKeyboard && {
-              backgroundColor: typePrimaryBackgroundColorFocus,
-              borderColor: typePrimaryBorderColorFocus,
-              '::before': {
-                content: '""',
-                position: 'absolute',
-                top: '0',
-                left: '0',
-                right: '0',
-                bottom: '0',
-                border: `${pxToRem(1)} solid ${typePrimaryBorderColorInsetFocus}`,
-                borderRadius: `${pxToRem(2)}`,
-              },
-            }),
-          },
-        }),
-
-      ...(primary &&
-        text && {
-          color: typeTextPrimaryColor,
-          ':hover': {
-            color: typeTextPrimaryColorHover,
-          },
-        }),
-
       ...(secondary &&
         !text && {
           color: typeSecondaryColor,
@@ -137,28 +82,6 @@ const buttonStyles: IComponentPartStylesInput<IButtonProps, any> = {
           },
         }),
 
-      ...(secondary &&
-        !text &&
-        !circular && {
-          outline: 0,
-          ':focus': {
-            ...(isFromKeyboard && {
-              backgroundColor: typeSecondaryBackgroundColorFocus,
-              borderColor: typeSecondaryBorderColorFocus,
-              '::before': {
-                content: '""',
-                position: 'absolute',
-                top: '0',
-                left: '0',
-                right: '0',
-                bottom: '0',
-                border: `${pxToRem(1)} solid ${typeSecondaryBorderColorInsetFocus}`,
-                borderRadius: `${pxToRem(2)}`,
-              },
-            }),
-          },
-        }),
-
       ...(secondary &&
         text && {
           color: typeTextSecondaryColor,
@@ -166,40 +89,8 @@ const buttonStyles: IComponentPartStylesInput<IButtonProps, any> = {
             color: typeTextSecondaryColorHover,
           },
         }),
-
-      ...(circular && {
-        minWidth: height,
-        padding: 0,
-        borderRadius: circularRadius,
-      }),
-
-      ...(fluid && {
-        width: '100%',
-        maxWidth: '100%',
-      }),
-
-      ...(disabled && {
-        cursor: 'default',
-        color: typeDisabledButtonColor,
-        backgroundColor: typeDisabledButtonBackgroundColor,
-        borderColor: typeDisabledButtonBackgroundColor,
-        ':hover': {
-          backgroundColor: typeDisabledButtonBackgroundColor,
-          borderColor: typeDisabledButtonBackgroundColor,
-        },
-      }),
-
-      ...(iconOnly && {
-        minWidth: height,
-        padding: 0,
-      }),
     }
   },
-
-  content: ({ props }) => ({
-    overflow: 'hidden',
-    ...(typeof props.content === 'string' && truncateStyle),
-  }),
 }
 
 export default buttonStyles
diff --git a/src/themes/teams-high-contrast/components/Button/buttonVariables.ts b/src/themes/teams-high-contrast/components/Button/buttonVariables.ts
index ba74be6ae8..b178d79313 100644
--- a/src/themes/teams-high-contrast/components/Button/buttonVariables.ts
+++ b/src/themes/teams-high-contrast/components/Button/buttonVariables.ts
@@ -1,79 +1,27 @@
-import { pxToRem } from '../../../../lib'
-
 export interface IButtonVariables {
   [key: string]: string | number
 
-  height: string
-  minWidth: string
-  maxWidth: string
-  borderRadius: string
   color: string
   backgroundColor: string
   backgroundColorHover: string
-  circularRadius: string
-  paddingLeftRightValue: number
   typePrimaryColor: string
   typePrimaryBackgroundColor: string
-  typePrimaryBackgroundColorActive: string
   typePrimaryBackgroundColorHover: string
-  typePrimaryBorderColor: string
-  typePrimaryBorderColorFocus: string
-  typePrimaryBorderColorInsetFocus: string
   typeSecondaryColor: string
   typeSecondaryBackgroundColor: string
-  typeSecondaryBackgroundColorActive: string
   typeSecondaryBackgroundColorHover: string
-  typeSecondaryBackgroundColorFocus: string
-  typeSecondaryBorderColor: string
-  typeSecondaryBorderColorActive: string
-  typeSecondaryBorderColorHover: string
-  typeSecondaryBorderColorFocus: string
-  typeSecondaryBorderColorInsetFocus: string
-  typeDisabledButtonColor: string
-  typeDisabledButtonBackgroundColor: string
-  typeTextColorHover: string
-  typeTextPrimaryColor: string
-  typeTextPrimaryColorHover: string
-  typeTextSecondaryColor: string
-  typeTextSecondaryColorHover: string
 }
 
 export default (siteVars: any): IButtonVariables => {
   return {
-    height: pxToRem(32),
-    minWidth: pxToRem(96),
-    maxWidth: pxToRem(280),
-    borderRadius: pxToRem(2),
     color: siteVars.white,
     backgroundColor: siteVars.black,
     backgroundColorHover: siteVars.yellow,
-    circularRadius: pxToRem(999),
-    fontWeight: siteVars.fontWeightSemibold,
-    paddingLeftRightValue: 20,
     typePrimaryColor: siteVars.white,
     typePrimaryBackgroundColor: siteVars.black,
-    typePrimaryBackgroundColorActive: siteVars.brand02,
     typePrimaryBackgroundColorHover: siteVars.yellow,
-    typePrimaryBackgroundColorFocus: siteVars.brand04,
-    typePrimaryBorderColor: 'transparent',
-    typePrimaryBorderColorFocus: siteVars.black,
-    typePrimaryBorderColorInsetFocus: siteVars.white,
     typeSecondaryColor: siteVars.white,
     typeSecondaryBackgroundColor: siteVars.black,
-    typeSecondaryBackgroundColorActive: siteVars.gray08,
     typeSecondaryBackgroundColorHover: siteVars.yellow,
-    typeSecondaryBackgroundColorFocus: siteVars.gray08,
-    typeSecondaryBorderColor: siteVars.white,
-    typeSecondaryBorderColorActive: siteVars.gray06,
-    typeSecondaryBorderColorHover: siteVars.gray06,
-    typeSecondaryBorderColorFocus: siteVars.black,
-    typeSecondaryBorderColorInsetFocus: siteVars.white,
-    typeDisabledButtonColor: siteVars.gray08,
-    typeDisabledButtonBackgroundColor: siteVars.gray09,
-    typeTextColorHover: siteVars.brand04,
-    typeTextPrimaryColor: siteVars.brand,
-    typeTextPrimaryColorHover: siteVars.brand04,
-    typeTextSecondaryColor: siteVars.gray03,
-    typeTextSecondaryColorHover: siteVars.brand04,
   }
 }

From fa1bec002ce2dcea36b0a6d84c167d009cd0cbbd Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 26 Sep 2018 15:58:43 +0200
Subject: [PATCH 06/23] -simplifying dark and high contrast theme

---
 src/themes/teams-dark/componentStyles.ts      |    3 -
 src/themes/teams-dark/componentVariables.ts   |    3 -
 .../components/Button/buttonGroupStyles.ts    |   32 -
 .../components/Button/buttonStyles.ts         |   43 +-
 .../components/Button/buttonVariables.ts      |   13 -
 .../teams-dark/components/Icon/font/index.ts  |   11 -
 .../components/Icon/fontAwesomeIconStyles.ts  | 1304 -----------------
 .../teams-dark/components/Icon/iconStyles.ts  |  131 --
 .../components/Icon/iconVariables.ts          |   21 -
 .../components/Icon/svg/icons/call.tsx        |   31 -
 .../Icon/svg/icons/callControlPresentNew.tsx  |   20 -
 .../icons/callControlStopPresentingNew.tsx    |   21 -
 .../components/Icon/svg/icons/callEnd.tsx     |   12 -
 .../Icon/svg/icons/callIncomingVideo.tsx      |   13 -
 .../Icon/svg/icons/callIncomingVideoOff.tsx   |   28 -
 .../Icon/svg/icons/callMicrophone.tsx         |   39 -
 .../Icon/svg/icons/callMicrophoneOff.tsx      |   30 -
 .../components/Icon/svg/icons/index.ts        |   27 -
 .../components/Icon/svg/icons/more.tsx        |   16 -
 .../components/Icon/svg/icons/teamCreate.tsx  |   22 -
 .../components/Icon/svg/icons/umbrella.tsx    |   15 -
 .../teams-dark/components/Icon/svg/index.ts   |   19 -
 .../teams-dark/components/Icon/svg/types.d.ts |   10 -
 src/themes/teams-dark/index.ts                |   37 +-
 .../teams-high-contrast/componentStyles.ts    |    2 -
 .../teams-high-contrast/componentVariables.ts |    2 -
 .../components/Button/buttonStyles.ts         |   26 +-
 .../components/Icon/font/index.ts             |   11 -
 .../components/Icon/fontAwesomeIconStyles.ts  | 1304 -----------------
 .../components/Icon/iconStyles.ts             |  131 --
 .../components/Icon/iconVariables.ts          |   21 -
 .../components/Icon/svg/icons/call.tsx        |   31 -
 .../Icon/svg/icons/callControlPresentNew.tsx  |   20 -
 .../icons/callControlStopPresentingNew.tsx    |   21 -
 .../components/Icon/svg/icons/callEnd.tsx     |   12 -
 .../Icon/svg/icons/callIncomingVideo.tsx      |   13 -
 .../Icon/svg/icons/callIncomingVideoOff.tsx   |   28 -
 .../Icon/svg/icons/callMicrophone.tsx         |   39 -
 .../Icon/svg/icons/callMicrophoneOff.tsx      |   30 -
 .../components/Icon/svg/icons/index.ts        |   27 -
 .../components/Icon/svg/icons/more.tsx        |   16 -
 .../components/Icon/svg/icons/teamCreate.tsx  |   22 -
 .../components/Icon/svg/icons/umbrella.tsx    |   15 -
 .../components/Icon/svg/index.ts              |   19 -
 .../components/Icon/svg/types.d.ts            |   10 -
 src/themes/teams-high-contrast/index.ts       |   38 +-
 46 files changed, 4 insertions(+), 3735 deletions(-)
 delete mode 100644 src/themes/teams-dark/components/Button/buttonGroupStyles.ts
 delete mode 100644 src/themes/teams-dark/components/Icon/font/index.ts
 delete mode 100644 src/themes/teams-dark/components/Icon/fontAwesomeIconStyles.ts
 delete mode 100644 src/themes/teams-dark/components/Icon/iconStyles.ts
 delete mode 100644 src/themes/teams-dark/components/Icon/iconVariables.ts
 delete mode 100644 src/themes/teams-dark/components/Icon/svg/icons/call.tsx
 delete mode 100644 src/themes/teams-dark/components/Icon/svg/icons/callControlPresentNew.tsx
 delete mode 100644 src/themes/teams-dark/components/Icon/svg/icons/callControlStopPresentingNew.tsx
 delete mode 100644 src/themes/teams-dark/components/Icon/svg/icons/callEnd.tsx
 delete mode 100644 src/themes/teams-dark/components/Icon/svg/icons/callIncomingVideo.tsx
 delete mode 100644 src/themes/teams-dark/components/Icon/svg/icons/callIncomingVideoOff.tsx
 delete mode 100644 src/themes/teams-dark/components/Icon/svg/icons/callMicrophone.tsx
 delete mode 100644 src/themes/teams-dark/components/Icon/svg/icons/callMicrophoneOff.tsx
 delete mode 100644 src/themes/teams-dark/components/Icon/svg/icons/index.ts
 delete mode 100644 src/themes/teams-dark/components/Icon/svg/icons/more.tsx
 delete mode 100644 src/themes/teams-dark/components/Icon/svg/icons/teamCreate.tsx
 delete mode 100644 src/themes/teams-dark/components/Icon/svg/icons/umbrella.tsx
 delete mode 100644 src/themes/teams-dark/components/Icon/svg/index.ts
 delete mode 100644 src/themes/teams-dark/components/Icon/svg/types.d.ts
 delete mode 100644 src/themes/teams-high-contrast/components/Icon/font/index.ts
 delete mode 100644 src/themes/teams-high-contrast/components/Icon/fontAwesomeIconStyles.ts
 delete mode 100644 src/themes/teams-high-contrast/components/Icon/iconStyles.ts
 delete mode 100644 src/themes/teams-high-contrast/components/Icon/iconVariables.ts
 delete mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/call.tsx
 delete mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/callControlPresentNew.tsx
 delete mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/callControlStopPresentingNew.tsx
 delete mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/callEnd.tsx
 delete mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/callIncomingVideo.tsx
 delete mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/callIncomingVideoOff.tsx
 delete mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/callMicrophone.tsx
 delete mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/callMicrophoneOff.tsx
 delete mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/index.ts
 delete mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/more.tsx
 delete mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/teamCreate.tsx
 delete mode 100644 src/themes/teams-high-contrast/components/Icon/svg/icons/umbrella.tsx
 delete mode 100644 src/themes/teams-high-contrast/components/Icon/svg/index.ts
 delete mode 100644 src/themes/teams-high-contrast/components/Icon/svg/types.d.ts

diff --git a/src/themes/teams-dark/componentStyles.ts b/src/themes/teams-dark/componentStyles.ts
index 65da5ff33c..440bb906eb 100644
--- a/src/themes/teams-dark/componentStyles.ts
+++ b/src/themes/teams-dark/componentStyles.ts
@@ -1,4 +1 @@
 export { default as Button } from './components/Button/buttonStyles'
-export { default as ButtonGroup } from './components/Button/buttonGroupStyles'
-
-export { default as Icon } from './components/Icon/iconStyles'
diff --git a/src/themes/teams-dark/componentVariables.ts b/src/themes/teams-dark/componentVariables.ts
index c591479ea1..e17b98e8c2 100644
--- a/src/themes/teams-dark/componentVariables.ts
+++ b/src/themes/teams-dark/componentVariables.ts
@@ -1,4 +1 @@
 export { default as Button } from './components/Button/buttonVariables'
-export { default as ButtonGroup } from './components/Button/buttonVariables'
-
-export { default as Icon } from './components/Icon/iconVariables'
diff --git a/src/themes/teams-dark/components/Button/buttonGroupStyles.ts b/src/themes/teams-dark/components/Button/buttonGroupStyles.ts
deleted file mode 100644
index e0d790cb3b..0000000000
--- a/src/themes/teams-dark/components/Button/buttonGroupStyles.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
-import { IButtonGroupProps } from '../../../../components/Button/ButtonGroup'
-
-const commonButtonsStyles = (circular: boolean) => ({
-  ...(!circular && {
-    margin: '0px',
-    borderRadius: '0px',
-  }),
-})
-
-const buttonGroupStyles: IComponentPartStylesInput<IButtonGroupProps, any> = {
-  root: (): ICSSInJSStyle => ({}),
-  middleButton: ({ props: p }) => ({
-    ...commonButtonsStyles(p.circular),
-  }),
-  firstButton: ({ props: p, variables: v }) => ({
-    ...commonButtonsStyles(p.circular),
-    ...(!p.circular && {
-      borderTopLeftRadius: v.borderRadius,
-      borderBottomLeftRadius: v.borderRadius,
-    }),
-  }),
-  lastButton: ({ props: p, variables: v }) => ({
-    ...commonButtonsStyles(p.circular),
-    ...(!p.circular && {
-      borderTopRightRadius: v.borderRadius,
-      borderBottomRightRadius: v.borderRadius,
-    }),
-  }),
-}
-
-export default buttonGroupStyles
diff --git a/src/themes/teams-dark/components/Button/buttonStyles.ts b/src/themes/teams-dark/components/Button/buttonStyles.ts
index 9ba83dc444..42d54f2490 100644
--- a/src/themes/teams-dark/components/Button/buttonStyles.ts
+++ b/src/themes/teams-dark/components/Button/buttonStyles.ts
@@ -1,24 +1,17 @@
 import { pxToRem } from '../../../../lib'
 import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
 import { IButtonProps } from '../../../../components/Button/Button'
-import { truncateStyle } from '../../../../styles/customCSS'
 
 const buttonStyles: IComponentPartStylesInput<IButtonProps, any> = {
   root: ({ props, variables }): ICSSInJSStyle => {
-    const { circular, disabled, fluid, type, text, iconOnly, isFromKeyboard } = props
+    const { circular, disabled, type, text, isFromKeyboard } = props
     const primary = type === 'primary'
     const secondary = type === 'secondary'
 
     const {
-      height,
-      minWidth,
-      maxWidth,
-      borderRadius,
       color,
       backgroundColor,
       backgroundColorHover,
-      circularRadius,
-      paddingLeftRightValue,
       typeDisabledButtonColor,
       typeDisabledButtonBackgroundColor,
       typePrimaryColor,
@@ -47,20 +40,8 @@ const buttonStyles: IComponentPartStylesInput<IButtonProps, any> = {
     } = variables
 
     return {
-      height,
-      minWidth,
-      maxWidth,
       color,
       backgroundColor,
-      borderRadius,
-      display: 'inline-flex',
-      justifyContent: 'center',
-      alignItems: 'center',
-      position: 'relative',
-      padding: `0 ${pxToRem(paddingLeftRightValue)}`,
-      margin: `0 ${pxToRem(8)} 0 0`,
-      verticalAlign: 'middle',
-      cursor: 'pointer',
 
       ...(!text && {
         borderWidth: `${secondary ? (circular ? 1 : 2) : 0}px`,
@@ -167,19 +148,7 @@ const buttonStyles: IComponentPartStylesInput<IButtonProps, any> = {
           },
         }),
 
-      ...(circular && {
-        minWidth: height,
-        padding: 0,
-        borderRadius: circularRadius,
-      }),
-
-      ...(fluid && {
-        width: '100%',
-        maxWidth: '100%',
-      }),
-
       ...(disabled && {
-        cursor: 'default',
         color: typeDisabledButtonColor,
         backgroundColor: typeDisabledButtonBackgroundColor,
         borderColor: typeDisabledButtonBackgroundColor,
@@ -188,18 +157,8 @@ const buttonStyles: IComponentPartStylesInput<IButtonProps, any> = {
           borderColor: typeDisabledButtonBackgroundColor,
         },
       }),
-
-      ...(iconOnly && {
-        minWidth: height,
-        padding: 0,
-      }),
     }
   },
-
-  content: ({ props }) => ({
-    overflow: 'hidden',
-    ...(typeof props.content === 'string' && truncateStyle),
-  }),
 }
 
 export default buttonStyles
diff --git a/src/themes/teams-dark/components/Button/buttonVariables.ts b/src/themes/teams-dark/components/Button/buttonVariables.ts
index ae4522f070..9455106be9 100644
--- a/src/themes/teams-dark/components/Button/buttonVariables.ts
+++ b/src/themes/teams-dark/components/Button/buttonVariables.ts
@@ -3,15 +3,9 @@ import { pxToRem } from '../../../../lib'
 export interface IButtonVariables {
   [key: string]: string | number
 
-  height: string
-  minWidth: string
-  maxWidth: string
-  borderRadius: string
   color: string
   backgroundColor: string
   backgroundColorHover: string
-  circularRadius: string
-  paddingLeftRightValue: number
   typePrimaryColor: string
   typePrimaryBackgroundColor: string
   typePrimaryBackgroundColorActive: string
@@ -40,16 +34,9 @@ export interface IButtonVariables {
 
 export default (siteVars: any): IButtonVariables => {
   return {
-    height: pxToRem(32),
-    minWidth: pxToRem(96),
-    maxWidth: pxToRem(280),
-    borderRadius: pxToRem(2),
     color: siteVars.black,
     backgroundColor: siteVars.gray08,
     backgroundColorHover: siteVars.gray06,
-    circularRadius: pxToRem(999),
-    fontWeight: siteVars.fontWeightSemibold,
-    paddingLeftRightValue: 20,
     typePrimaryColor: siteVars.white,
     typePrimaryBackgroundColor: siteVars.brand,
     typePrimaryBackgroundColorActive: siteVars.brand02,
diff --git a/src/themes/teams-dark/components/Icon/font/index.ts b/src/themes/teams-dark/components/Icon/font/index.ts
deleted file mode 100644
index 5e19b8d16b..0000000000
--- a/src/themes/teams-dark/components/Icon/font/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FontIconSpec } from 'theme'
-
-const fontAwesome = (iconCode: string): FontIconSpec => ({
-  fontFamily: 'Icons',
-  content: `'\\${iconCode}'`,
-})
-
-export default {
-  'call-home': fontAwesome('f015'),
-  'take-rest': fontAwesome('f0f4'),
-} as { [key: string]: FontIconSpec }
diff --git a/src/themes/teams-dark/components/Icon/fontAwesomeIconStyles.ts b/src/themes/teams-dark/components/Icon/fontAwesomeIconStyles.ts
deleted file mode 100644
index 920f99b92d..0000000000
--- a/src/themes/teams-dark/components/Icon/fontAwesomeIconStyles.ts
+++ /dev/null
@@ -1,1304 +0,0 @@
-const fontAwesomeIcons = new Map([
-  // Deprecated *In/Out Naming Conflict)
-  ['linkedin in', 'f0e1'],
-  ['zoom in', 'f00e'],
-  ['zoom out', 'f010'],
-  ['sign in', 'f2f6'],
-  ['in cart', 'f218'],
-  ['log out', 'f2f5'],
-  ['sign out', 'f2f5'],
-
-  // Icons
-  ['500px', 'f26e'],
-  ['accessible icon', 'f368'],
-  ['accusoft', 'f369'],
-  ['address book', 'f2b9'],
-  ['address card', 'f2bb'],
-  ['adjust', 'f042'],
-  ['adn', 'f170'],
-  ['adversal', 'f36a'],
-  ['affiliatetheme', 'f36b'],
-  ['algolia', 'f36c'],
-  ['align center', 'f037'],
-  ['align justify', 'f039'],
-  ['align left', 'f036'],
-  ['align right', 'f038'],
-  ['amazon', 'f270'],
-  ['amazon pay', 'f42c'],
-  ['ambulance', 'f0f9'],
-  ['american sign language interpreting', 'f2a3'],
-  ['amilia', 'f36d'],
-  ['anchor', 'f13d'],
-  ['android', 'f17b'],
-  ['angellist', 'f209'],
-  ['angle double down', 'f103'],
-  ['angle double left', 'f100'],
-  ['angle double right', 'f101'],
-  ['angle double up', 'f102'],
-  ['angle down', 'f107'],
-  ['angle left', 'f104'],
-  ['angle right', 'f105'],
-  ['angle up', 'f106'],
-  ['angrycreative', 'f36e'],
-  ['angular', 'f420'],
-  ['app store', 'f36f'],
-  ['app store ios', 'f370'],
-  ['apper', 'f371'],
-  ['apple', 'f179'],
-  ['apple pay', 'f415'],
-  ['archive', 'f187'],
-  ['arrow alternate circle down', 'f358'],
-  ['arrow alternate circle left', 'f359'],
-  ['arrow alternate circle right', 'f35a'],
-  ['arrow alternate circle up', 'f35b'],
-  ['arrow circle down', 'f0ab'],
-  ['arrow circle left', 'f0a8'],
-  ['arrow circle right', 'f0a9'],
-  ['arrow circle up', 'f0aa'],
-  ['arrow down', 'f063'],
-  ['arrow left', 'f060'],
-  ['arrow right', 'f061'],
-  ['arrow up', 'f062'],
-  ['arrows alternate', 'f0b2'],
-  ['arrows alternate horizontal', 'f337'],
-  ['arrows alternate vertical', 'f338'],
-  ['assistive listening systems', 'f2a2'],
-  ['asterisk', 'f069'],
-  ['asymmetrik', 'f372'],
-  ['at', 'f1fa'],
-  ['audible', 'f373'],
-  ['audio description', 'f29e'],
-  ['autoprefixer', 'f41c'],
-  ['avianex', 'f374'],
-  ['aviato', 'f421'],
-  ['aws', 'f375'],
-  ['backward', 'f04a'],
-  ['balance scale', 'f24e'],
-  ['ban', 'f05e'],
-  ['band aid', 'f462'],
-  ['bandcamp', 'f2d5'],
-  ['barcode', 'f02a'],
-  ['bars', 'f0c9'],
-  ['baseball ball', 'f433'],
-  ['basketball ball', 'f434'],
-  ['bath', 'f2cd'],
-  ['battery empty', 'f244'],
-  ['battery full', 'f240'],
-  ['battery half', 'f242'],
-  ['battery quarter', 'f243'],
-  ['battery three quarters', 'f241'],
-  ['bed', 'f236'],
-  ['beer', 'f0fc'],
-  ['behance', 'f1b4'],
-  ['behance square', 'f1b5'],
-  ['bell', 'f0f3'],
-  ['bell slash', 'f1f6'],
-  ['bicycle', 'f206'],
-  ['bimobject', 'f378'],
-  ['binoculars', 'f1e5'],
-  ['birthday cake', 'f1fd'],
-  ['bitbucket', 'f171'],
-  ['bitcoin', 'f379'],
-  ['bity', 'f37a'],
-  ['black tie', 'f27e'],
-  ['blackberry', 'f37b'],
-  ['blind', 'f29d'],
-  ['blogger', 'f37c'],
-  ['blogger b', 'f37d'],
-  ['bluetooth', 'f293'],
-  ['bluetooth b', 'f294'],
-  ['bold', 'f032'],
-  ['bolt', 'f0e7'],
-  ['bomb', 'f1e2'],
-  ['book', 'f02d'],
-  ['bookmark', 'f02e'],
-  ['bowling ball', 'f436'],
-  ['box', 'f466'],
-  ['boxes', 'f468'],
-  ['braille', 'f2a1'],
-  ['briefcase', 'f0b1'],
-  ['btc', 'f15a'],
-  ['bug', 'f188'],
-  ['building', 'f1ad'],
-  ['bullhorn', 'f0a1'],
-  ['bullseye', 'f140'],
-  ['buromobelexperte', 'f37f'],
-  ['bus', 'f207'],
-  ['buysellads', 'f20d'],
-  ['calculator', 'f1ec'],
-  ['calendar', 'f133'],
-  ['calendar alternate', 'f073'],
-  ['calendar check', 'f274'],
-  ['calendar minus', 'f272'],
-  ['calendar plus', 'f271'],
-  ['calendar times', 'f273'],
-  ['camera', 'f030'],
-  ['camera retro', 'f083'],
-  ['car', 'f1b9'],
-  ['caret down', 'f0d7'],
-  ['caret left', 'f0d9'],
-  ['caret right', 'f0da'],
-  ['caret square down', 'f150'],
-  ['caret square left', 'f191'],
-  ['caret square right', 'f152'],
-  ['caret square up', 'f151'],
-  ['caret up', 'f0d8'],
-  ['cart arrow down', 'f218'],
-  ['cart plus', 'f217'],
-  ['cc amazon pay', 'f42d'],
-  ['cc amex', 'f1f3'],
-  ['cc apple pay', 'f416'],
-  ['cc diners club', 'f24c'],
-  ['cc discover', 'f1f2'],
-  ['cc jcb', 'f24b'],
-  ['cc mastercard', 'f1f1'],
-  ['cc paypal', 'f1f4'],
-  ['cc stripe', 'f1f5'],
-  ['cc visa', 'f1f0'],
-  ['centercode', 'f380'],
-  ['certificate', 'f0a3'],
-  ['chart area', 'f1fe'],
-  ['chart bar', 'f080'],
-  ['chart line', 'f201'],
-  ['chart pie', 'f200'],
-  ['check', 'f00c'],
-  ['check circle', 'f058'],
-  ['check square', 'f14a'],
-  ['chess', 'f439'],
-  ['chess bishop', 'f43a'],
-  ['chess board', 'f43c'],
-  ['chess king', 'f43f'],
-  ['chess knight', 'f441'],
-  ['chess pawn', 'f443'],
-  ['chess queen', 'f445'],
-  ['chess rook', 'f447'],
-  ['chevron circle down', 'f13a'],
-  ['chevron circle left', 'f137'],
-  ['chevron circle right', 'f138'],
-  ['chevron circle up', 'f139'],
-  ['chevron down', 'f078'],
-  ['chevron left', 'f053'],
-  ['chevron right', 'f054'],
-  ['chevron up', 'f077'],
-  ['child', 'f1ae'],
-  ['chrome', 'f268'],
-  ['circle', 'f111'],
-  ['circle notch', 'f1ce'],
-  ['clipboard', 'f328'],
-  ['clipboard check', 'f46c'],
-  ['clipboard list', 'f46d'],
-  ['clock', 'f017'],
-  ['clone', 'f24d'],
-  ['closed captioning', 'f20a'],
-  ['cloud', 'f0c2'],
-  ['cloudscale', 'f383'],
-  ['cloudsmith', 'f384'],
-  ['cloudversify', 'f385'],
-  ['code', 'f121'],
-  ['code branch', 'f126'],
-  ['codepen', 'f1cb'],
-  ['codiepie', 'f284'],
-  ['coffee', 'f0f4'],
-  ['cog', 'f013'],
-  ['cogs', 'f085'],
-  ['columns', 'f0db'],
-  ['comment', 'f075'],
-  ['comment alternate', 'f27a'],
-  ['comments', 'f086'],
-  ['compass', 'f14e'],
-  ['compress', 'f066'],
-  ['connectdevelop', 'f20e'],
-  ['contao', 'f26d'],
-  ['copy', 'f0c5'],
-  ['copyright', 'f1f9'],
-  ['cpanel', 'f388'],
-  ['creative commons', 'f25e'],
-  ['credit card', 'f09d'],
-  ['crop', 'f125'],
-  ['crosshairs', 'f05b'],
-  ['css3', 'f13c'],
-  ['css3 alternate', 'f38b'],
-  ['cube', 'f1b2'],
-  ['cubes', 'f1b3'],
-  ['cut', 'f0c4'],
-  ['cuttlefish', 'f38c'],
-  ['d and d', 'f38d'],
-  ['dashcube', 'f210'],
-  ['database', 'f1c0'],
-  ['deaf', 'f2a4'],
-  ['delicious', 'f1a5'],
-  ['deploydog', 'f38e'],
-  ['deskpro', 'f38f'],
-  ['desktop', 'f108'],
-  ['deviantart', 'f1bd'],
-  ['digg', 'f1a6'],
-  ['digital ocean', 'f391'],
-  ['discord', 'f392'],
-  ['discourse', 'f393'],
-  ['dna', 'f471'],
-  ['dochub', 'f394'],
-  ['docker', 'f395'],
-  ['dollar sign', 'f155'],
-  ['dolly', 'f472'],
-  ['dolly flatbed', 'f474'],
-  ['dot circle', 'f192'],
-  ['download', 'f019'],
-  ['draft2digital', 'f396'],
-  ['dribbble', 'f17d'],
-  ['dribbble square', 'f397'],
-  ['dropbox', 'f16b'],
-  ['drupal', 'f1a9'],
-  ['dyalog', 'f399'],
-  ['earlybirds', 'f39a'],
-  ['edge', 'f282'],
-  ['edit', 'f044'],
-  ['eject', 'f052'],
-  ['elementor', 'f430'],
-  ['ellipsis horizontal', 'f141'],
-  ['ellipsis vertical', 'f142'],
-  ['ember', 'f423'],
-  ['empire', 'f1d1'],
-  ['envelope', 'f0e0'],
-  ['envelope open', 'f2b6'],
-  ['envelope square', 'f199'],
-  ['envira', 'f299'],
-  ['eraser', 'f12d'],
-  ['erlang', 'f39d'],
-  ['ethereum', 'f42e'],
-  ['etsy', 'f2d7'],
-  ['euro sign', 'f153'],
-  ['exchange alternate', 'f362'],
-  ['exclamation', 'f12a'],
-  ['exclamation circle', 'f06a'],
-  ['exclamation triangle', 'f071'],
-  ['expand', 'f065'],
-  ['expand arrows alternate', 'f31e'],
-  ['expeditedssl', 'f23e'],
-  ['external alternate', 'f35d'],
-  ['external square alternate', 'f360'],
-  ['eye', 'f06e'],
-  ['eye dropper', 'f1fb'],
-  ['eye slash', 'f070'],
-  ['facebook', 'f09a'],
-  ['facebook f', 'f39e'],
-  ['facebook messenger', 'f39f'],
-  ['facebook square', 'f082'],
-  ['fast backward', 'f049'],
-  ['fast forward', 'f050'],
-  ['fax', 'f1ac'],
-  ['female', 'f182'],
-  ['fighter jet', 'f0fb'],
-  ['file', 'f15b'],
-  ['file alternate', 'f15c'],
-  ['file archive', 'f1c6'],
-  ['file audio', 'f1c7'],
-  ['file code', 'f1c9'],
-  ['file excel', 'f1c3'],
-  ['file image', 'f1c5'],
-  ['file pdf', 'f1c1'],
-  ['file powerpoint', 'f1c4'],
-  ['file video', 'f1c8'],
-  ['file word', 'f1c2'],
-  ['film', 'f008'],
-  ['filter', 'f0b0'],
-  ['fire', 'f06d'],
-  ['fire extinguisher', 'f134'],
-  ['firefox', 'f269'],
-  ['first aid', 'f479'],
-  ['first order', 'f2b0'],
-  ['firstdraft', 'f3a1'],
-  ['flag', 'f024'],
-  ['flag checkered', 'f11e'],
-  ['flask', 'f0c3'],
-  ['flickr', 'f16e'],
-  ['flipboard', 'f44d'],
-  ['fly', 'f417'],
-  ['folder', 'f07b'],
-  ['folder open', 'f07c'],
-  ['font', 'f031'],
-  ['font awesome', 'f2b4'],
-  ['font awesome alternate', 'f35c'],
-  ['font awesome flag', 'f425'],
-  ['fonticons', 'f280'],
-  ['fonticons fi', 'f3a2'],
-  ['football ball', 'f44e'],
-  ['fort awesome', 'f286'],
-  ['fort awesome alternate', 'f3a3'],
-  ['forumbee', 'f211'],
-  ['forward', 'f04e'],
-  ['foursquare', 'f180'],
-  ['free code camp', 'f2c5'],
-  ['freebsd', 'f3a4'],
-  ['frown', 'f119'],
-  ['futbol', 'f1e3'],
-  ['gamepad', 'f11b'],
-  ['gavel', 'f0e3'],
-  ['gem', 'f3a5'],
-  ['genderless', 'f22d'],
-  ['get pocket', 'f265'],
-  ['gg', 'f260'],
-  ['gg circle', 'f261'],
-  ['gift', 'f06b'],
-  ['git', 'f1d3'],
-  ['git square', 'f1d2'],
-  ['github', 'f09b'],
-  ['github alternate', 'f113'],
-  ['github square', 'f092'],
-  ['gitkraken', 'f3a6'],
-  ['gitlab', 'f296'],
-  ['gitter', 'f426'],
-  ['glass martini', 'f000'],
-  ['glide', 'f2a5'],
-  ['glide g', 'f2a6'],
-  ['globe', 'f0ac'],
-  ['gofore', 'f3a7'],
-  ['golf ball', 'f450'],
-  ['goodreads', 'f3a8'],
-  ['goodreads g', 'f3a9'],
-  ['google', 'f1a0'],
-  ['google drive', 'f3aa'],
-  ['google play', 'f3ab'],
-  ['google plus', 'f2b3'],
-  ['google plus g', 'f0d5'],
-  ['google plus square', 'f0d4'],
-  ['google wallet', 'f1ee'],
-  ['graduation cap', 'f19d'],
-  ['gratipay', 'f184'],
-  ['grav', 'f2d6'],
-  ['gripfire', 'f3ac'],
-  ['grunt', 'f3ad'],
-  ['gulp', 'f3ae'],
-  ['h square', 'f0fd'],
-  ['hacker news', 'f1d4'],
-  ['hacker news square', 'f3af'],
-  ['hand lizard', 'f258'],
-  ['hand paper', 'f256'],
-  ['hand peace', 'f25b'],
-  ['hand point down', 'f0a7'],
-  ['hand point left', 'f0a5'],
-  ['hand point right', 'f0a4'],
-  ['hand point up', 'f0a6'],
-  ['hand pointer', 'f25a'],
-  ['hand rock', 'f255'],
-  ['hand scissors', 'f257'],
-  ['hand spock', 'f259'],
-  ['handshake', 'f2b5'],
-  ['hashtag', 'f292'],
-  ['hdd', 'f0a0'],
-  ['heading', 'f1dc'],
-  ['headphones', 'f025'],
-  ['heart', 'f004'],
-  ['heartbeat', 'f21e'],
-  ['hips', 'f452'],
-  ['hire a helper', 'f3b0'],
-  ['history', 'f1da'],
-  ['hockey puck', 'f453'],
-  ['home', 'f015'],
-  ['hooli', 'f427'],
-  ['hospital', 'f0f8'],
-  ['hospital symbol', 'f47e'],
-  ['hotjar', 'f3b1'],
-  ['hourglass', 'f254'],
-  ['hourglass end', 'f253'],
-  ['hourglass half', 'f252'],
-  ['hourglass start', 'f251'],
-  ['houzz', 'f27c'],
-  ['html5', 'f13b'],
-  ['hubspot', 'f3b2'],
-  ['i cursor', 'f246'],
-  ['id badge', 'f2c1'],
-  ['id card', 'f2c2'],
-  ['image', 'f03e'],
-  ['images', 'f302'],
-  ['imdb', 'f2d8'],
-  ['inbox', 'f01c'],
-  ['indent', 'f03c'],
-  ['industry', 'f275'],
-  ['info', 'f129'],
-  ['info circle', 'f05a'],
-  ['instagram', 'f16d'],
-  ['internet explorer', 'f26b'],
-  ['ioxhost', 'f208'],
-  ['italic', 'f033'],
-  ['itunes', 'f3b4'],
-  ['itunes note', 'f3b5'],
-  ['jenkins', 'f3b6'],
-  ['joget', 'f3b7'],
-  ['joomla', 'f1aa'],
-  ['js', 'f3b8'],
-  ['js square', 'f3b9'],
-  ['jsfiddle', 'f1cc'],
-  ['key', 'f084'],
-  ['keyboard', 'f11c'],
-  ['keycdn', 'f3ba'],
-  ['kickstarter', 'f3bb'],
-  ['kickstarter k', 'f3bc'],
-  ['korvue', 'f42f'],
-  ['language', 'f1ab'],
-  ['laptop', 'f109'],
-  ['laravel', 'f3bd'],
-  ['lastfm', 'f202'],
-  ['lastfm square', 'f203'],
-  ['leaf', 'f06c'],
-  ['leanpub', 'f212'],
-  ['lemon', 'f094'],
-  ['less', 'f41d'],
-  ['level down alternate', 'f3be'],
-  ['level up alternate', 'f3bf'],
-  ['life ring', 'f1cd'],
-  ['lightbulb', 'f0eb'],
-  ['linechat', 'f3c0'],
-  ['linkify', 'f0c1'],
-  ['linkedin', 'f08c'],
-  ['linkedin alt', 'f0e1'],
-  ['linode', 'f2b8'],
-  ['linux', 'f17c'],
-  ['lira sign', 'f195'],
-  ['list', 'f03a'],
-  ['list alternate', 'f022'],
-  ['list ol', 'f0cb'],
-  ['list ul', 'f0ca'],
-  ['location arrow', 'f124'],
-  ['lock', 'f023'],
-  ['lock open', 'f3c1'],
-  ['long arrow alternate down', 'f309'],
-  ['long arrow alternate left', 'f30a'],
-  ['long arrow alternate right', 'f30b'],
-  ['long arrow alternate up', 'f30c'],
-  ['low vision', 'f2a8'],
-  ['lyft', 'f3c3'],
-  ['magento', 'f3c4'],
-  ['magic', 'f0d0'],
-  ['magnet', 'f076'],
-  ['male', 'f183'],
-  ['map', 'f279'],
-  ['map marker', 'f041'],
-  ['map marker alternate', 'f3c5'],
-  ['map pin', 'f276'],
-  ['map signs', 'f277'],
-  ['mars', 'f222'],
-  ['mars double', 'f227'],
-  ['mars stroke', 'f229'],
-  ['mars stroke horizontal', 'f22b'],
-  ['mars stroke vertical', 'f22a'],
-  ['maxcdn', 'f136'],
-  ['medapps', 'f3c6'],
-  ['medium', 'f23a'],
-  ['medium m', 'f3c7'],
-  ['medkit', 'f0fa'],
-  ['medrt', 'f3c8'],
-  ['meetup', 'f2e0'],
-  ['meh', 'f11a'],
-  ['mercury', 'f223'],
-  ['microchip', 'f2db'],
-  ['microphone', 'f130'],
-  ['microphone slash', 'f131'],
-  ['microsoft', 'f3ca'],
-  ['minus', 'f068'],
-  ['minus circle', 'f056'],
-  ['minus square', 'f146'],
-  ['mix', 'f3cb'],
-  ['mixcloud', 'f289'],
-  ['mizuni', 'f3cc'],
-  ['mobile', 'f10b'],
-  ['mobile alternate', 'f3cd'],
-  ['modx', 'f285'],
-  ['monero', 'f3d0'],
-  ['money bill alternate', 'f3d1'],
-  ['moon', 'f186'],
-  ['motorcycle', 'f21c'],
-  ['mouse pointer', 'f245'],
-  ['music', 'f001'],
-  ['napster', 'f3d2'],
-  ['neuter', 'f22c'],
-  ['newspaper', 'f1ea'],
-  ['nintendo switch', 'f418'],
-  ['node', 'f419'],
-  ['node js', 'f3d3'],
-  ['npm', 'f3d4'],
-  ['ns8', 'f3d5'],
-  ['nutritionix', 'f3d6'],
-  ['object group', 'f247'],
-  ['object ungroup', 'f248'],
-  ['odnoklassniki', 'f263'],
-  ['odnoklassniki square', 'f264'],
-  ['opencart', 'f23d'],
-  ['openid', 'f19b'],
-  ['opera', 'f26a'],
-  ['optin monster', 'f23c'],
-  ['osi', 'f41a'],
-  ['outdent', 'f03b'],
-  ['page4', 'f3d7'],
-  ['pagelines', 'f18c'],
-  ['paint brush', 'f1fc'],
-  ['palfed', 'f3d8'],
-  ['pallet', 'f482'],
-  ['paper plane', 'f1d8'],
-  ['paperclip', 'f0c6'],
-  ['paragraph', 'f1dd'],
-  ['paste', 'f0ea'],
-  ['patreon', 'f3d9'],
-  ['pause', 'f04c'],
-  ['pause circle', 'f28b'],
-  ['paw', 'f1b0'],
-  ['paypal', 'f1ed'],
-  ['pen square', 'f14b'],
-  ['pencil alternate', 'f303'],
-  ['percent', 'f295'],
-  ['periscope', 'f3da'],
-  ['phabricator', 'f3db'],
-  ['phoenix framework', 'f3dc'],
-  ['phone', 'f095'],
-  ['phone square', 'f098'],
-  ['phone volume', 'f2a0'],
-  ['php', 'f457'],
-  ['pied piper', 'f2ae'],
-  ['pied piper alternate', 'f1a8'],
-  ['pied piper pp', 'f1a7'],
-  ['pills', 'f484'],
-  ['pinterest', 'f0d2'],
-  ['pinterest p', 'f231'],
-  ['pinterest square', 'f0d3'],
-  ['plane', 'f072'],
-  ['play', 'f04b'],
-  ['play circle', 'f144'],
-  ['playstation', 'f3df'],
-  ['plug', 'f1e6'],
-  ['plus', 'f067'],
-  ['plus circle', 'f055'],
-  ['plus square', 'f0fe'],
-  ['podcast', 'f2ce'],
-  ['pound sign', 'f154'],
-  ['power off', 'f011'],
-  ['print', 'f02f'],
-  ['product hunt', 'f288'],
-  ['pushed', 'f3e1'],
-  ['puzzle piece', 'f12e'],
-  ['python', 'f3e2'],
-  ['qq', 'f1d6'],
-  ['qrcode', 'f029'],
-  ['question', 'f128'],
-  ['question circle', 'f059'],
-  ['quidditch', 'f458'],
-  ['quinscape', 'f459'],
-  ['quora', 'f2c4'],
-  ['quote left', 'f10d'],
-  ['quote right', 'f10e'],
-  ['random', 'f074'],
-  ['ravelry', 'f2d9'],
-  ['react', 'f41b'],
-  ['rebel', 'f1d0'],
-  ['recycle', 'f1b8'],
-  ['redriver', 'f3e3'],
-  ['reddit', 'f1a1'],
-  ['reddit alien', 'f281'],
-  ['reddit square', 'f1a2'],
-  ['redo', 'f01e'],
-  ['redo alternate', 'f2f9'],
-  ['registered', 'f25d'],
-  ['rendact', 'f3e4'],
-  ['renren', 'f18b'],
-  ['reply', 'f3e5'],
-  ['reply all', 'f122'],
-  ['replyd', 'f3e6'],
-  ['resolving', 'f3e7'],
-  ['retweet', 'f079'],
-  ['road', 'f018'],
-  ['rocket', 'f135'],
-  ['rocketchat', 'f3e8'],
-  ['rockrms', 'f3e9'],
-  ['rss', 'f09e'],
-  ['rss square', 'f143'],
-  ['ruble sign', 'f158'],
-  ['rupee sign', 'f156'],
-  ['safari', 'f267'],
-  ['sass', 'f41e'],
-  ['save', 'f0c7'],
-  ['schlix', 'f3ea'],
-  ['scribd', 'f28a'],
-  ['search', 'f002'],
-  ['search minus', 'f010'],
-  ['search plus', 'f00e'],
-  ['searchengin', 'f3eb'],
-  ['sellcast', 'f2da'],
-  ['sellsy', 'f213'],
-  ['server', 'f233'],
-  ['servicestack', 'f3ec'],
-  ['share', 'f064'],
-  ['share alternate', 'f1e0'],
-  ['share alternate square', 'f1e1'],
-  ['share square', 'f14d'],
-  ['shekel sign', 'f20b'],
-  ['shield alternate', 'f3ed'],
-  ['ship', 'f21a'],
-  ['shipping fast', 'f48b'],
-  ['shirtsinbulk', 'f214'],
-  ['shopping bag', 'f290'],
-  ['shopping basket', 'f291'],
-  ['shopping cart', 'f07a'],
-  ['shower', 'f2cc'],
-  ['sign language', 'f2a7'],
-  ['signal', 'f012'],
-  ['simplybuilt', 'f215'],
-  ['sistrix', 'f3ee'],
-  ['sitemap', 'f0e8'],
-  ['skyatlas', 'f216'],
-  ['skype', 'f17e'],
-  ['slack', 'f198'],
-  ['slack hash', 'f3ef'],
-  ['sliders horizontal', 'f1de'],
-  ['slideshare', 'f1e7'],
-  ['smile', 'f118'],
-  ['snapchat', 'f2ab'],
-  ['snapchat ghost', 'f2ac'],
-  ['snapchat square', 'f2ad'],
-  ['snowflake', 'f2dc'],
-  ['sort', 'f0dc'],
-  ['sort alphabet down', 'f15d'],
-  ['sort alphabet up', 'f15e'],
-  ['sort amount down', 'f160'],
-  ['sort amount up', 'f161'],
-  ['sort down', 'f0dd'],
-  ['sort numeric down', 'f162'],
-  ['sort numeric up', 'f163'],
-  ['sort up', 'f0de'],
-  ['soundcloud', 'f1be'],
-  ['space shuttle', 'f197'],
-  ['speakap', 'f3f3'],
-  ['spinner', 'f110'],
-  ['spotify', 'f1bc'],
-  ['square', 'f0c8'],
-  ['square full', 'f45c'],
-  ['stack exchange', 'f18d'],
-  ['stack overflow', 'f16c'],
-  ['star', 'f005'],
-  ['star half', 'f089'],
-  ['staylinked', 'f3f5'],
-  ['steam', 'f1b6'],
-  ['steam square', 'f1b7'],
-  ['steam symbol', 'f3f6'],
-  ['step backward', 'f048'],
-  ['step forward', 'f051'],
-  ['stethoscope', 'f0f1'],
-  ['sticker mule', 'f3f7'],
-  ['sticky note', 'f249'],
-  ['stop', 'f04d'],
-  ['stop circle', 'f28d'],
-  ['stopwatch', 'f2f2'],
-  ['strava', 'f428'],
-  ['street view', 'f21d'],
-  ['strikethrough', 'f0cc'],
-  ['stripe', 'f429'],
-  ['stripe s', 'f42a'],
-  ['studiovinari', 'f3f8'],
-  ['stumbleupon', 'f1a4'],
-  ['stumbleupon circle', 'f1a3'],
-  ['subscript', 'f12c'],
-  ['subway', 'f239'],
-  ['suitcase', 'f0f2'],
-  ['sun', 'f185'],
-  ['superpowers', 'f2dd'],
-  ['superscript', 'f12b'],
-  ['supple', 'f3f9'],
-  ['sync', 'f021'],
-  ['sync alternate', 'f2f1'],
-  ['syringe', 'f48e'],
-  ['table', 'f0ce'],
-  ['table tennis', 'f45d'],
-  ['tablet', 'f10a'],
-  ['tablet alternate', 'f3fa'],
-  ['tachometer alternate', 'f3fd'],
-  ['tag', 'f02b'],
-  ['tags', 'f02c'],
-  ['tasks', 'f0ae'],
-  ['taxi', 'f1ba'],
-  ['telegram', 'f2c6'],
-  ['telegram plane', 'f3fe'],
-  ['tencent weibo', 'f1d5'],
-  ['terminal', 'f120'],
-  ['text height', 'f034'],
-  ['text width', 'f035'],
-  ['th', 'f00a'],
-  ['th large', 'f009'],
-  ['th list', 'f00b'],
-  ['themeisle', 'f2b2'],
-  ['thermometer', 'f491'],
-  ['thermometer empty', 'f2cb'],
-  ['thermometer full', 'f2c7'],
-  ['thermometer half', 'f2c9'],
-  ['thermometer quarter', 'f2ca'],
-  ['thermometer three quarters', 'f2c8'],
-  ['thumbs down', 'f165'],
-  ['thumbs up', 'f164'],
-  ['thumbtack', 'f08d'],
-  ['ticket alternate', 'f3ff'],
-  ['times', 'f00d'],
-  ['times circle', 'f057'],
-  ['tint', 'f043'],
-  ['toggle off', 'f204'],
-  ['toggle on', 'f205'],
-  ['trademark', 'f25c'],
-  ['train', 'f238'],
-  ['transgender', 'f224'],
-  ['transgender alternate', 'f225'],
-  ['trash', 'f1f8'],
-  ['trash alternate', 'f2ed'],
-  ['tree', 'f1bb'],
-  ['trello', 'f181'],
-  ['tripadvisor', 'f262'],
-  ['trophy', 'f091'],
-  ['truck', 'f0d1'],
-  ['tty', 'f1e4'],
-  ['tumblr', 'f173'],
-  ['tumblr square', 'f174'],
-  ['tv', 'f26c'],
-  ['twitch', 'f1e8'],
-  ['twitter', 'f099'],
-  ['twitter square', 'f081'],
-  ['typo3', 'f42b'],
-  ['uber', 'f402'],
-  ['uikit', 'f403'],
-  ['umbrella', 'f0e9'],
-  ['underline', 'f0cd'],
-  ['undo', 'f0e2'],
-  ['undo alternate', 'f2ea'],
-  ['uniregistry', 'f404'],
-  ['universal access', 'f29a'],
-  ['university', 'f19c'],
-  ['unlink', 'f127'],
-  ['unlock', 'f09c'],
-  ['unlock alternate', 'f13e'],
-  ['untappd', 'f405'],
-  ['upload', 'f093'],
-  ['usb', 'f287'],
-  ['user', 'f007'],
-  ['user circle', 'f2bd'],
-  ['user md', 'f0f0'],
-  ['user plus', 'f234'],
-  ['user secret', 'f21b'],
-  ['user times', 'f235'],
-  ['users', 'f0c0'],
-  ['ussunnah', 'f407'],
-  ['utensil spoon', 'f2e5'],
-  ['utensils', 'f2e7'],
-  ['vaadin', 'f408'],
-  ['venus', 'f221'],
-  ['venus double', 'f226'],
-  ['venus mars', 'f228'],
-  ['viacoin', 'f237'],
-  ['viadeo', 'f2a9'],
-  ['viadeo square', 'f2aa'],
-  ['viber', 'f409'],
-  ['video', 'f03d'],
-  ['vimeo', 'f40a'],
-  ['vimeo square', 'f194'],
-  ['vimeo v', 'f27d'],
-  ['vine', 'f1ca'],
-  ['vk', 'f189'],
-  ['vnv', 'f40b'],
-  ['volleyball ball', 'f45f'],
-  ['volume down', 'f027'],
-  ['volume off', 'f026'],
-  ['volume up', 'f028'],
-  ['vuejs', 'f41f'],
-  ['warehouse', 'f494'],
-  ['weibo', 'f18a'],
-  ['weight', 'f496'],
-  ['weixin', 'f1d7'],
-  ['whatsapp', 'f232'],
-  ['whatsapp square', 'f40c'],
-  ['wheelchair', 'f193'],
-  ['whmcs', 'f40d'],
-  ['wifi', 'f1eb'],
-  ['wikipedia w', 'f266'],
-  ['window close', 'f410'],
-  ['window maximize', 'f2d0'],
-  ['window minimize', 'f2d1'],
-  ['window restore', 'f2d2'],
-  ['windows', 'f17a'],
-  ['won sign', 'f159'],
-  ['wordpress', 'f19a'],
-  ['wordpress simple', 'f411'],
-  ['wpbeginner', 'f297'],
-  ['wpexplorer', 'f2de'],
-  ['wpforms', 'f298'],
-  ['wrench', 'f0ad'],
-  ['xbox', 'f412'],
-  ['xing', 'f168'],
-  ['xing square', 'f169'],
-  ['y combinator', 'f23b'],
-  ['yahoo', 'f19e'],
-  ['yandex', 'f413'],
-  ['yandex international', 'f414'],
-  ['yelp', 'f1e9'],
-  ['yen sign', 'f157'],
-  ['yoast', 'f2b1'],
-  ['youtube', 'f167'],
-  ['youtube square', 'f431'],
-
-  // Aliases
-  ['chess rock', 'f447'],
-  ['ordered list', 'f0cb'],
-  ['unordered list', 'f0ca'],
-  ['user doctor', 'f0f0'],
-  ['shield', 'f3ed'],
-  ['puzzle', 'f12e'],
-  ['credit card amazon pay', 'f42d'],
-  ['credit card american express', 'f1f3'],
-  ['credit card diners club', 'f24c'],
-  ['credit card discover', 'f1f2'],
-  ['credit card jcb', 'f24b'],
-  ['credit card mastercard', 'f1f1'],
-  ['credit card paypal', 'f1f4'],
-  ['credit card stripe', 'f1f5'],
-  ['credit card visa', 'f1f0'],
-  ['add circle', 'f055'],
-  ['add square', 'f0fe'],
-  ['add to calendar', 'f271'],
-  ['add to cart', 'f217'],
-  ['add user', 'f234'],
-  ['add', 'f067'],
-  ['alarm mute', 'f1f6'],
-  ['alarm', 'f0f3'],
-  ['ald', 'f2a2'],
-  ['als', 'f2a2'],
-  ['american express card', 'f1f3'],
-  ['american express', 'f1f3'],
-  ['amex', 'f1f3'],
-  ['announcement', 'f0a1'],
-  ['area chart', 'f1fe'],
-  ['area graph', 'f1fe'],
-  ['arrow down cart', 'f218'],
-  ['asexual', 'f22d'],
-  ['asl interpreting', 'f2a3'],
-  ['asl', 'f2a3'],
-  ['assistive listening devices', 'f2a2'],
-  ['attach', 'f0c6'],
-  ['attention', 'f06a'],
-  ['balance', 'f24e'],
-  ['bar', 'f0fc'],
-  ['bathtub', 'f2cd'],
-  ['battery four', 'f240'],
-  ['battery high', 'f241'],
-  ['battery low', 'f243'],
-  ['battery medium', 'f242'],
-  ['battery one', 'f243'],
-  ['battery three', 'f241'],
-  ['battery two', 'f242'],
-  ['battery zero', 'f244'],
-  ['birthday', 'f1fd'],
-  ['block layout', 'f009'],
-  ['bluetooth alternative', 'f294'],
-  ['broken chain', 'f127'],
-  ['browser', 'f022'],
-  ['call square', 'f098'],
-  ['call', 'f095'],
-  ['cancel', 'f00d'],
-  ['cart', 'f07a'],
-  ['cc', 'f20a'],
-  ['chain', 'f0c1'],
-  ['chat', 'f075'],
-  ['checked calendar', 'f274'],
-  ['checkmark', 'f00c'],
-  ['circle notched', 'f1ce'],
-  ['close', 'f00d'],
-  ['cny', 'f157'],
-  ['cocktail', 'f000'],
-  ['commenting', 'f27a'],
-  ['computer', 'f108'],
-  ['configure', 'f0ad'],
-  ['content', 'f0c9'],
-  ['deafness', 'f2a4'],
-  ['delete calendar', 'f273'],
-  ['delete', 'f00d'],
-  ['detective', 'f21b'],
-  ['diners club card', 'f24c'],
-  ['diners club', 'f24c'],
-  ['discover card', 'f1f2'],
-  ['discover', 'f1f2'],
-  ['discussions', 'f086'],
-  ['doctor', 'f0f0'],
-  ['dollar', 'f155'],
-  ['dont', 'f05e'],
-  ['dribble', 'f17d'],
-  ['drivers license', 'f2c2'],
-  ['dropdown', 'f0d7'],
-  ['eercast', 'f2da'],
-  ['emergency', 'f0f9'],
-  ['envira gallery', 'f299'],
-  ['erase', 'f12d'],
-  ['eur', 'f153'],
-  ['euro', 'f153'],
-  ['eyedropper', 'f1fb'],
-  ['fa', 'f2b4'],
-  ['factory', 'f275'],
-  ['favorite', 'f005'],
-  ['feed', 'f09e'],
-  ['female homosexual', 'f226'],
-  ['file text', 'f15c'],
-  ['find', 'f1e5'],
-  ['first aid', 'f0fa'],
-  ['five hundred pixels', 'f26e'],
-  ['fork', 'f126'],
-  ['game', 'f11b'],
-  ['gay', 'f227'],
-  ['gbp', 'f154'],
-  ['gittip', 'f184'],
-  ['google plus circle', 'f2b3'],
-  ['google plus official', 'f2b3'],
-  ['grab', 'f255'],
-  ['graduation', 'f19d'],
-  ['grid layout', 'f00a'],
-  ['group', 'f0c0'],
-  ['h', 'f0fd'],
-  ['hand victory', 'f25b'],
-  ['handicap', 'f193'],
-  ['hard of hearing', 'f2a4'],
-  ['header', 'f1dc'],
-  ['help circle', 'f059'],
-  ['help', 'f128'],
-  ['heterosexual', 'f228'],
-  ['hide', 'f070'],
-  ['hotel', 'f236'],
-  ['hourglass four', 'f254'],
-  ['hourglass full', 'f254'],
-  ['hourglass one', 'f251'],
-  ['hourglass three', 'f253'],
-  ['hourglass two', 'f252'],
-  ['idea', 'f0eb'],
-  ['ils', 'f20b'],
-  ['in-cart', 'f218'],
-  ['inr', 'f156'],
-  ['intergender', 'f224'],
-  ['intersex', 'f224'],
-  ['japan credit bureau card', 'f24b'],
-  ['japan credit bureau', 'f24b'],
-  ['jcb', 'f24b'],
-  ['jpy', 'f157'],
-  ['krw', 'f159'],
-  ['lab', 'f0c3'],
-  ['law', 'f24e'],
-  ['legal', 'f0e3'],
-  ['lesbian', 'f226'],
-  ['lightning', 'f0e7'],
-  ['like', 'f004'],
-  ['line graph', 'f201'],
-  ['linkedin square', 'f08c'],
-  ['linkify', 'f0c1'],
-  ['lira', 'f195'],
-  ['list layout', 'f00b'],
-  ['magnify', 'f00e'],
-  ['mail forward', 'f064'],
-  ['mail square', 'f199'],
-  ['mail', 'f0e0'],
-  ['male homosexual', 'f227'],
-  ['man', 'f222'],
-  ['marker', 'f041'],
-  ['mars alternate', 'f229'],
-  ['mars horizontal', 'f22b'],
-  ['mars vertical', 'f22a'],
-  ['mastercard card', 'f1f1'],
-  ['mastercard', 'f1f1'],
-  ['microsoft edge', 'f282'],
-  ['military', 'f0fb'],
-  ['ms edge', 'f282'],
-  ['mute', 'f131'],
-  ['new pied piper', 'f2ae'],
-  ['non binary transgender', 'f223'],
-  ['numbered list', 'f0cb'],
-  ['optinmonster', 'f23c'],
-  ['options', 'f1de'],
-  ['other gender horizontal', 'f22b'],
-  ['other gender vertical', 'f22a'],
-  ['other gender', 'f229'],
-  ['payment', 'f09d'],
-  ['paypal card', 'f1f4'],
-  ['pencil square', 'f14b'],
-  ['photo', 'f030'],
-  ['picture', 'f03e'],
-  ['pie chart', 'f200'],
-  ['pie graph', 'f200'],
-  ['pied piper hat', 'f2ae'],
-  ['pin', 'f08d'],
-  ['plus cart', 'f217'],
-  ['pocket', 'f265'],
-  ['point', 'f041'],
-  ['pointing down', 'f0a7'],
-  ['pointing left', 'f0a5'],
-  ['pointing right', 'f0a4'],
-  ['pointing up', 'f0a6'],
-  ['pound', 'f154'],
-  ['power cord', 'f1e6'],
-  ['power', 'f011'],
-  ['privacy', 'f084'],
-  ['r circle', 'f25d'],
-  ['rain', 'f0e9'],
-  ['record', 'f03d'],
-  ['refresh', 'f021'],
-  ['remove circle', 'f057'],
-  ['remove from calendar', 'f272'],
-  ['remove user', 'f235'],
-  ['remove', 'f00d'],
-  ['repeat', 'f01e'],
-  ['rmb', 'f157'],
-  ['rouble', 'f158'],
-  ['rub', 'f158'],
-  ['ruble', 'f158'],
-  ['rupee', 'f156'],
-  ['s15', 'f2cd'],
-  ['selected radio', 'f192'],
-  ['send', 'f1d8'],
-  ['setting', 'f013'],
-  ['settings', 'f085'],
-  ['shekel', 'f20b'],
-  ['sheqel', 'f20b'],
-  ['shipping', 'f0d1'],
-  ['shop', 'f07a'],
-  ['shuffle', 'f074'],
-  ['shutdown', 'f011'],
-  ['sidebar', 'f0c9'],
-  ['signing', 'f2a7'],
-  ['signup', 'f044'],
-  ['sliders', 'f1de'],
-  ['soccer', 'f1e3'],
-  ['sort alphabet ascending', 'f15d'],
-  ['sort alphabet descending', 'f15e'],
-  ['sort ascending', 'f0de'],
-  ['sort content ascending', 'f160'],
-  ['sort content descending', 'f161'],
-  ['sort descending', 'f0dd'],
-  ['sort numeric ascending', 'f162'],
-  ['sort numeric descending', 'f163'],
-  ['sound', 'f025'],
-  ['spy', 'f21b'],
-  ['stripe card', 'f1f5'],
-  ['student', 'f19d'],
-  ['talk', 'f27a'],
-  ['target', 'f140'],
-  ['teletype', 'f1e4'],
-  ['television', 'f26c'],
-  ['text cursor', 'f246'],
-  ['text telephone', 'f1e4'],
-  ['theme isle', 'f2b2'],
-  ['theme', 'f043'],
-  ['thermometer', 'f2c7'],
-  ['thumb tack', 'f08d'],
-  ['time', 'f017'],
-  ['tm', 'f25c'],
-  ['toggle down', 'f150'],
-  ['toggle left', 'f191'],
-  ['toggle right', 'f152'],
-  ['toggle up', 'f151'],
-  ['translate', 'f1ab'],
-  ['travel', 'f0b1'],
-  ['treatment', 'f0f1'],
-  ['triangle down', 'f0d7'],
-  ['triangle left', 'f0d9'],
-  ['triangle right', 'f0da'],
-  ['triangle up', 'f0d8'],
-  ['try', 'f195'],
-  ['unhide', 'f06e'],
-  ['unlinkify', 'f127'],
-  ['unmute', 'f130'],
-  ['usd', 'f155'],
-  ['user cancel', 'f235'],
-  ['user close', 'f235'],
-  ['user delete', 'f235'],
-  ['user x', 'f235'],
-  ['vcard', 'f2bb'],
-  ['video camera', 'f03d'],
-  ['video play', 'f144'],
-  ['visa card', 'f1f0'],
-  ['visa', 'f1f0'],
-  ['volume control phone', 'f2a0'],
-  ['wait', 'f017'],
-  ['warning circle', 'f06a'],
-  ['warning sign', 'f071'],
-  ['warning', 'f12a'],
-  ['wechat', 'f1d7'],
-  ['wi-fi', 'f1eb'],
-  ['wikipedia', 'f266'],
-  ['winner', 'f091'],
-  ['wizard', 'f0d0'],
-  ['woman', 'f221'],
-  ['won', 'f159'],
-  ['wordpress beginner', 'f297'],
-  ['wordpress forms', 'f298'],
-  ['world', 'f0ac'],
-  ['write square', 'f14b'],
-  ['x', 'f00d'],
-  ['yc', 'f23b'],
-  ['ycombinator', 'f23b'],
-  ['yen', 'f157'],
-  ['zip', 'f187'],
-  ['zoom-in', 'f00e'],
-  ['zoom-out', 'f010'],
-  ['zoom', 'f00e'],
-  ['bitbucket square', 'f171'],
-  ['checkmark box', 'f14a'],
-  ['circle thin', 'f111'],
-  ['cloud download', 'f381'],
-  ['cloud upload', 'f382'],
-  ['compose', 'f303'],
-  ['conversation', 'f086'],
-  ['credit card alternative', 'f09d'],
-  ['currency', 'f3d1'],
-  ['dashboard', 'f3fd'],
-  ['diamond', 'f3a5'],
-  ['disk', 'f0a0'],
-  ['exchange', 'f362'],
-  ['external share', 'f14d'],
-  ['external square', 'f360'],
-  ['external', 'f35d'],
-  ['facebook official', 'f082'],
-  ['food', 'f2e7'],
-  ['hourglass zero', 'f253'],
-  ['level down', 'f3be'],
-  ['level up', 'f3bf'],
-  ['logout', 'f2f5'],
-  ['meanpath', 'f0c8'],
-  ['money', 'f3d1'],
-  ['move', 'f0b2'],
-  ['pencil', 'f303'],
-  ['protect', 'f023'],
-  ['radio', 'f192'],
-  ['remove bookmark', 'f02e'],
-  ['resize horizontal', 'f337'],
-  ['resize vertical', 'f338'],
-  ['sign-in', 'f2f6'],
-  ['sign-out', 'f2f5'],
-  ['spoon', 'f2e5'],
-  ['star half empty', 'f089'],
-  ['star half full', 'f089'],
-  ['ticket', 'f3ff'],
-  ['times rectangle', 'f410'],
-  ['write', 'f303'],
-  ['youtube play', 'f167'],
-  ['address book outline', 'f2b9'],
-  ['address card outline', 'f2bb'],
-  ['arrow alternate circle down outline', 'f358'],
-  ['arrow alternate circle left outline', 'f359'],
-  ['arrow alternate circle right outline', 'f35a'],
-  ['arrow alternate circle up outline', 'f35b'],
-  ['bell outline', 'f0f3'],
-  ['bell slash outline', 'f1f6'],
-  ['bookmark outline', 'f02e'],
-  ['building outline', 'f1ad'],
-  ['calendar outline', 'f133'],
-  ['calendar alternate outline', 'f073'],
-  ['calendar check outline', 'f274'],
-  ['calendar minus outline', 'f272'],
-  ['calendar plus outline', 'f271'],
-  ['calendar times outline', 'f273'],
-  ['caret square down outline', 'f150'],
-  ['caret square left outline', 'f191'],
-  ['caret square right outline', 'f152'],
-  ['caret square up outline', 'f151'],
-  ['chart bar outline', 'f080'],
-  ['check circle outline', 'f058'],
-  ['check square outline', 'f14a'],
-  ['circle outline', 'f111'],
-  ['clipboard outline', 'f328'],
-  ['clock outline', 'f017'],
-  ['clone outline', 'f24d'],
-  ['closed captioning outline', 'f20a'],
-  ['comment outline', 'f075'],
-  ['comment alternate outline', 'f27a'],
-  ['comments outline', 'f086'],
-  ['compass outline', 'f14e'],
-  ['copy outline', 'f0c5'],
-  ['copyright outline', 'f1f9'],
-  ['credit card outline', 'f09d'],
-  ['dot circle outline', 'f192'],
-  ['edit outline', 'f044'],
-  ['envelope outline', 'f0e0'],
-  ['envelope open outline', 'f2b6'],
-  ['eye slash outline', 'f070'],
-  ['file outline', 'f15b'],
-  ['file alternate outline', 'f15c'],
-  ['file archive outline', 'f1c6'],
-  ['file audio outline', 'f1c7'],
-  ['file code outline', 'f1c9'],
-  ['file excel outline', 'f1c3'],
-  ['file image outline', 'f1c5'],
-  ['file pdf outline', 'f1c1'],
-  ['file powerpoint outline', 'f1c4'],
-  ['file video outline', 'f1c8'],
-  ['file word outline', 'f1c2'],
-  ['flag outline', 'f024'],
-  ['folder outline', 'f07b'],
-  ['folder open outline', 'f07c'],
-  ['frown outline', 'f119'],
-  ['futbol outline', 'f1e3'],
-  ['gem outline', 'f3a5'],
-  ['hand lizard outline', 'f258'],
-  ['hand paper outline', 'f256'],
-  ['hand peace outline', 'f25b'],
-  ['hand point down outline', 'f0a7'],
-  ['hand point left outline', 'f0a5'],
-  ['hand point right outline', 'f0a4'],
-  ['hand point up outline', 'f0a6'],
-  ['hand pointer outline', 'f25a'],
-  ['hand rock outline', 'f255'],
-  ['hand scissors outline', 'f257'],
-  ['hand spock outline', 'f259'],
-  ['handshake outline', 'f2b5'],
-  ['hdd outline', 'f0a0'],
-  ['heart outline', 'f004'],
-  ['hospital outline', 'f0f8'],
-  ['hourglass outline', 'f254'],
-  ['id badge outline', 'f2c1'],
-  ['id card outline', 'f2c2'],
-  ['image outline', 'f03e'],
-  ['images outline', 'f302'],
-  ['keyboard outline', 'f11c'],
-  ['lemon outline', 'f094'],
-  ['life ring outline', 'f1cd'],
-  ['lightbulb outline', 'f0eb'],
-  ['list alternate outline', 'f022'],
-  ['map outline', 'f279'],
-  ['meh outline', 'f11a'],
-  ['minus square outline', 'f146'],
-  ['money bill alternate outline', 'f3d1'],
-  ['moon outline', 'f186'],
-  ['newspaper outline', 'f1ea'],
-  ['object group outline', 'f247'],
-  ['object ungroup outline', 'f248'],
-  ['paper plane outline', 'f1d8'],
-  ['pause circle outline', 'f28b'],
-  ['play circle outline', 'f144'],
-  ['plus square outline', 'f0fe'],
-  ['question circle outline', 'f059'],
-  ['registered outline', 'f25d'],
-  ['save outline', 'f0c7'],
-  ['share square outline', 'f14d'],
-  ['smile outline', 'f118'],
-  ['snowflake outline', 'f2dc'],
-  ['square outline', 'f0c8'],
-  ['star outline', 'f005'],
-  ['star half outline', 'f089'],
-  ['sticky note outline', 'f249'],
-  ['stop circle outline', 'f28d'],
-  ['sun outline', 'f185'],
-  ['thumbs down outline', 'f165'],
-  ['thumbs up outline', 'f164'],
-  ['times circle outline', 'f057'],
-  ['trash alternate outline', 'f2ed'],
-  ['user outline', 'f007'],
-  ['user circle outline', 'f2bd'],
-  ['window close outline', 'f410'],
-  ['window maximize outline', 'f2d0'],
-  ['window minimize outline', 'f2d1'],
-  ['window restore outline', 'f2d2'],
-  ['disk outline', 'f369'],
-
-  // Outline Aliases
-  ['heart empty', 'f004'],
-  ['star empty', 'f089'],
-])
-
-export default name => fontAwesomeIcons.get(name)
-
-/**
- * TODO We should probably declare a @fontface rule here
- */
diff --git a/src/themes/teams-dark/components/Icon/iconStyles.ts b/src/themes/teams-dark/components/Icon/iconStyles.ts
deleted file mode 100644
index 80b009ed84..0000000000
--- a/src/themes/teams-dark/components/Icon/iconStyles.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import fontAwesomeIcons from './fontAwesomeIconStyles'
-import { callable } from '../../../../lib'
-import { disabledStyle, fittedStyle } from '../../../../styles/customCSS'
-import { FontIconSpec, IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
-import { ResultOf } from '../../../../../types/utils'
-import { IconXSpacing, IIconProps } from '../../../../components/Icon/Icon'
-
-import { getStyle as getSvgStyle } from './svg'
-
-const sizes = new Map([
-  ['micro', 0.3],
-  ['mini', 0.4],
-  ['tiny', 0.5],
-  ['small', 0.75],
-  ['normal', 1],
-  ['large', 1.5],
-  ['big', 2],
-  ['huge', 4],
-  ['massive', 8],
-])
-
-const getDefaultFontIcon = (iconName: string) => {
-  const fontFamily = iconName && iconName.includes('outline') ? 'outline-icons' : 'Icons'
-  const content = (iconName && `'\\${fontAwesomeIcons(iconName)}'`) || '?'
-
-  return { content, fontFamily }
-}
-
-const getSize = size => `${sizes.get(size)}em`
-
-const getFontStyles = (iconName: string, themeIcon?: ResultOf<FontIconSpec>): ICSSInJSStyle => {
-  const { fontFamily, content } = themeIcon || getDefaultFontIcon(iconName)
-
-  return {
-    fontFamily,
-    width: '1.18em',
-    fontStyle: 'normal',
-    fontWeight: 400,
-    textDecoration: 'inherit',
-    textAlign: 'center',
-
-    '-webkit-font-smoothing': 'antialiased',
-    '-moz-osx-font-smoothing': 'grayscale',
-    backfaceVisibility: 'hidden',
-
-    lineHeight: 1,
-
-    '::before': {
-      content,
-      boxSizing: 'inherit',
-      background: '0 0',
-    },
-  }
-}
-
-const getXSpacingStyles = (xSpacing: IconXSpacing, horizontalSpace: string): ICSSInJSStyle => {
-  switch (xSpacing) {
-    case 'none':
-      return fittedStyle
-    case 'before':
-      return { ...fittedStyle, marginLeft: horizontalSpace }
-    case 'after':
-      return { ...fittedStyle, marginRight: horizontalSpace }
-    case 'both':
-      return { ...fittedStyle, margin: `0 ${horizontalSpace}` }
-  }
-}
-
-const getBorderedStyles = (isFontBased, circular, borderColor, color): ICSSInJSStyle => {
-  return {
-    ...getPaddedStyle(isFontBased),
-
-    // TODO: "black" here should actually match the Icon's fill or text color
-    boxShadow: `0 0 0 0.05em ${borderColor || color || 'black'} inset`,
-    ...(circular ? { borderRadius: '50%' } : {}),
-  }
-}
-
-const getPaddedStyle = (isFontBased: boolean): ICSSInJSStyle => ({
-  padding: `0.5em ${isFontBased ? 0 : '0.5em'}`,
-  width: '2em',
-  height: '2em',
-})
-
-const iconStyles: IComponentPartStylesInput<IIconProps, any> = {
-  root: ({
-    props: { disabled, name, size, bordered, circular, xSpacing },
-    variables: v,
-    theme,
-  }): ICSSInJSStyle => {
-    const iconSpec = theme.icons[name]
-    const isFontBased = !iconSpec || !iconSpec.isSvg
-
-    return {
-      display: 'inline-block',
-      fontSize: getSize(size),
-
-      width: '1em',
-      height: '1em',
-
-      ...(isFontBased &&
-        getFontStyles(name, callable(iconSpec && (iconSpec.icon as FontIconSpec))())),
-
-      ...(isFontBased && { color: v.color }),
-      backgroundColor: v.backgroundColor,
-
-      opacity: 1,
-      margin: v.margin,
-
-      speak: 'none',
-
-      verticalAlign: 'middle',
-      overflow: 'hidden',
-
-      ...getXSpacingStyles(xSpacing, v.horizontalSpace),
-
-      ...((bordered || v.borderColor || circular) &&
-        getBorderedStyles(isFontBased, circular, v.borderColor, v.color)),
-
-      ...(disabled && disabledStyle),
-    }
-  },
-
-  svg: getSvgStyle('svg'),
-
-  g: getSvgStyle('g'),
-
-  /* additional SVG styles for different paths could be added/used in the same way */
-}
-
-export default iconStyles
diff --git a/src/themes/teams-dark/components/Icon/iconVariables.ts b/src/themes/teams-dark/components/Icon/iconVariables.ts
deleted file mode 100644
index a2c58b3d07..0000000000
--- a/src/themes/teams-dark/components/Icon/iconVariables.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { pxToRem } from '../../../../lib'
-
-export interface IconVariables {
-  [key: string]: string | number | undefined
-
-  color?: string
-  backgroundColor?: string
-  borderColor?: string
-  horizontalSpace: string
-  margin: string
-}
-
-export default (): IconVariables => ({
-  color: undefined,
-  // TODO move initial variable discovery to JSON files
-  // similar to how components have an info.json file
-  backgroundColor: undefined,
-  borderColor: undefined,
-  horizontalSpace: pxToRem(10),
-  margin: '0 0.25em 0 0',
-})
diff --git a/src/themes/teams-dark/components/Icon/svg/icons/call.tsx b/src/themes/teams-dark/components/Icon/svg/icons/call.tsx
deleted file mode 100644
index cd16790278..0000000000
--- a/src/themes/teams-dark/components/Icon/svg/icons/call.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default {
-  icon: ({ classes }) => (
-    <svg viewBox="0 0 32 32" role="presentation" focusable="false" className={classes.svg}>
-      <g>
-        <path
-          d="M19.5,23c-0.1,0-0.3,0-0.4-0.1c-2.6-0.8-4.8-2.4-6.4-4.6l0,0c-1.6-2.2-2.3-4.9-2.1-7.6c0-0.6,0.4-1.1,0.9-1.3l0.8-0.4
-                        c0.9-0.4,1.9,0,2.3,0.8l0.3,0.7c0.5,1,0.8,2.5-0.1,3.4l-0.6,0.6c-0.2,0.2-0.2,0.5-0.1,0.7l1.9,2.8c0.1,0.2,0.4,0.3,0.6,0.2l0.7-0.3
-                        c1.3-0.5,2.6,0.3,3.3,1.1l0.5,0.5c0.6,0.7,0.6,1.8,0,2.4l-0.6,0.7C20.3,22.9,19.9,23,19.5,23z M13.5,17.8c1.4,2,3.5,3.5,5.8,4.2
-                        c0.2,0.1,0.4,0,0.5-0.1l0.6-0.7c0.3-0.3,0.3-0.8,0-1.1L20,19.6c-0.6-0.6-1.4-1.1-2.2-0.8l-0.7,0.3c-0.7,0.3-1.5,0.1-1.9-0.5
-                        l-1.9-2.8c-0.4-0.6-0.4-1.4,0.2-1.9l0.5-0.6c0.5-0.6,0.3-1.6-0.1-2.3l-0.3-0.7c-0.2-0.4-0.6-0.5-1-0.4l-0.8,0.4
-                        c-0.2,0.1-0.3,0.3-0.3,0.5C11.4,13.4,12.1,15.8,13.5,17.8L13.5,17.8z"
-        />
-        <path
-          d="M19.5,23c-0.1,0-0.3,0-0.4-0.1c-2.6-0.8-4.8-2.4-6.4-4.6l0,0c-1.6-2.2-2.3-4.9-2.1-7.6c0-0.6,0.4-1.1,0.9-1.3L12.3,9
-                        c0.9-0.4,1.9,0,2.3,0.8l0.3,0.7c0.5,1,0.8,2.5-0.1,3.4l-0.6,0.6C14,14.7,14,15,14.1,15.2L16,18c0.1,0.2,0.4,0.3,0.6,0.2l0.7-0.3
-                        c1.3-0.5,2.6,0.3,3.3,1.1l0.5,0.5c0.6,0.7,0.6,1.8,0,2.4l-0.6,0.7C20.3,22.9,19.9,23,19.5,23z"
-        />
-      </g>
-    </svg>
-  ),
-  styles: {
-    svg: ({ props, variables }) => {
-      return {
-        fill: variables.color,
-      }
-    },
-  },
-} as TeamsSvgIconSpec
diff --git a/src/themes/teams-dark/components/Icon/svg/icons/callControlPresentNew.tsx b/src/themes/teams-dark/components/Icon/svg/icons/callControlPresentNew.tsx
deleted file mode 100644
index 0a9e17e190..0000000000
--- a/src/themes/teams-dark/components/Icon/svg/icons/callControlPresentNew.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default (
-  <svg viewBox="0 0 32 32" role="presentation">
-    <path
-      d="M22.5,9h-13C8.672852,9,8,9.672852,8,10.5v9C8,20.327148,8.672852,21,9.5,21H13c0.276367,0,0.5-0.223633,0.5-0.5
-            S13.276367,20,13,20H9.5C9.224121,20,9,19.775391,9,19.5v-9C9,10.224121,9.224121,10,9.5,10h13c0.275391,0,0.5,0.224121,0.5,0.5v9
-            c0,0.275391-0.224609,0.5-0.5,0.5H19c-0.276367,0-0.5,0.223633-0.5,0.5S18.723633,21,19,21h3.5c0.827148,0,1.5-0.672852,1.5-1.5v-9
-            C24,9.672852,23.327148,9,22.5,9z"
-    />
-    <path
-      d="M19,18c0.255859,0,0.511719-0.097656,0.707031-0.292969c0.390625-0.390625,0.390625-1.023438,0-1.414062
-            l-2.999695-2.999695c-0.092163-0.092285-0.20282-0.165344-0.325195-0.216064c-0.244507-0.101135-0.519775-0.101135-0.764282,0
-            c-0.122375,0.05072-0.233032,0.123779-0.325195,0.216064l-2.999695,2.999695c-0.390625,0.390625-0.390625,1.023438,0,1.414062
-            C12.488281,17.902344,12.744141,18,13,18s0.511719-0.097656,0.707031-0.292969L15,16.414062V22.5c0,0.552734,0.447754,1,1,1
-            s1-0.447266,1-1v-6.085938l1.292969,1.292969C18.488281,17.902344,18.744141,18,19,18z"
-    />
-  </svg>
-) as TeamsSvgIconSpec
diff --git a/src/themes/teams-dark/components/Icon/svg/icons/callControlStopPresentingNew.tsx b/src/themes/teams-dark/components/Icon/svg/icons/callControlStopPresentingNew.tsx
deleted file mode 100644
index e4b84b13d2..0000000000
--- a/src/themes/teams-dark/components/Icon/svg/icons/callControlStopPresentingNew.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default (
-  <svg viewBox="0 0 32 32" role="presentation">
-    <path
-      d="M22.5,9h-13C8.672852,9,8,9.672852,8,10.5v9C8,20.327148,8.672852,21,9.5,21h2.006836c0.276367,0,0.5-0.223633,0.5-0.5
-                s-0.223633-0.5-0.5-0.5H9.5C9.224121,20,9,19.775391,9,19.5v-9C9,10.224121,9.224121,10,9.5,10h13c0.275391,0,0.5,0.224121,0.5,0.5
-                v9c0,0.275391-0.224609,0.5-0.5,0.5h-2.066406c-0.276367,0-0.5,0.223633-0.5,0.5s0.223633,0.5,0.5,0.5H22.5
-                c0.827148,0,1.5-0.672852,1.5-1.5v-9C24,9.672852,23.327148,9,22.5,9z"
-    />
-    <path
-      d="M19.207031,16.292969c-0.390625-0.390625-1.023438-0.390625-1.414062,0L16,18.085938l-1.792969-1.792969
-                c-0.390625-0.390625-1.023438-0.390625-1.414062,0s-0.390625,1.023438,0,1.414062L14.585938,19.5l-1.792969,1.792969
-                c-0.390625,0.390625-0.390625,1.023438,0,1.414062C12.988281,22.902344,13.244141,23,13.5,23s0.511719-0.097656,0.707031-0.292969
-                L16,20.914062l1.792969,1.792969C17.988281,22.902344,18.244141,23,18.5,23s0.511719-0.097656,0.707031-0.292969
-                c0.390625-0.390625,0.390625-1.023438,0-1.414062L17.414062,19.5l1.792969-1.792969
-                C19.597656,17.316406,19.597656,16.683594,19.207031,16.292969z"
-    />
-  </svg>
-) as TeamsSvgIconSpec
diff --git a/src/themes/teams-dark/components/Icon/svg/icons/callEnd.tsx b/src/themes/teams-dark/components/Icon/svg/icons/callEnd.tsx
deleted file mode 100644
index c266dba22b..0000000000
--- a/src/themes/teams-dark/components/Icon/svg/icons/callEnd.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default (
-  <svg role="presentation" viewBox="0 0 32 32">
-    <path
-      d="M23.4,15.6C21.3,13.9,18.7,13,16,13s-5.3,0.9-7.4,2.6C8.1,16,7.9,16.5,8,17.1c0,0.1,0.2,0.5,0.2,0.5
-                c0.4,0.6,0.9,1.4,1.9,1.2l0.7-0.1c1.1-0.2,2.5-0.8,2.7-2.1l0.2-1.1l4.2,0l0.2,1.1c0.3,1.3,1.7,1.9,2.7,2l0.7,0.1c0.1,0,0.2,0,0.2,0
-                c0.7,0,1.1-0.5,1.5-1c0,0,0.4-0.7,0.4-0.7C24.1,16.5,23.9,16,23.4,15.6z"
-    />
-  </svg>
-) as TeamsSvgIconSpec
diff --git a/src/themes/teams-dark/components/Icon/svg/icons/callIncomingVideo.tsx b/src/themes/teams-dark/components/Icon/svg/icons/callIncomingVideo.tsx
deleted file mode 100644
index 38dd12913f..0000000000
--- a/src/themes/teams-dark/components/Icon/svg/icons/callIncomingVideo.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default (
-  <svg viewBox="0 0 32 32" role="presentation">
-    <g>
-      <path d="M23.6968,12.0403c-0.1836-0.0786-0.3975-0.04-0.542,0.0981l-2.5317,2.4165C20.2212,14.9382,20,15.4514,20,16  c0,0.5483,0.2212,1.0615,0.623,1.4448l2.5317,2.4167C23.2495,19.9521,23.374,20,23.5,20c0.0664,0,0.1333-0.0132,0.1968-0.0403  C23.8809,19.8809,24,19.7002,24,19.5v-7C24,12.2998,23.8809,12.1191,23.6968,12.0403z M23,18.3315l-1.6865-1.6099v-0.0002  C21.1113,16.5286,21,16.2725,21,16s0.1113-0.5286,0.3135-0.7217L23,13.6685V18.3315z" />
-      <path d="M17.5,11H9.8193c-0.7056,0-1.3232,0.5393-1.4692,1.2822C8.1177,13.4619,8,14.7129,8,16s0.1177,2.5381,0.3501,3.7173  C8.4961,20.4607,9.1138,21,9.8193,21H17.5c0.8271,0,1.5-0.6729,1.5-1.5v-7C19,11.6729,18.3271,11,17.5,11z M18,19.5  c0,0.2756-0.2241,0.5-0.5,0.5H9.8193c-0.2285,0-0.4341-0.2-0.4878-0.4756C9.1113,18.4082,9,17.2224,9,16  s0.1113-2.4082,0.3315-3.5249C9.3853,12.2,9.5908,12,9.8193,12H17.5c0.2759,0,0.5,0.2244,0.5,0.5V19.5z" />
-      <path d="M23.6968,12.0403c-0.1841-0.0786-0.3975-0.04-0.542,0.0981l-2.5317,2.4165C20.2212,14.9382,20,15.4514,20,16  c0,0.5483,0.2212,1.0615,0.623,1.4448l2.5317,2.4167C23.2495,19.9521,23.374,20,23.5,20c0.0664,0,0.1333-0.0132,0.1968-0.0403  C23.8809,19.8809,24,19.7002,24,19.5v-7C24,12.2998,23.8809,12.1191,23.6968,12.0403z" />
-      <path d="M17.5,11H9.8193c-0.7056,0-1.3232,0.5393-1.4692,1.2822C8.1177,13.4619,8,14.7129,8,16s0.1177,2.5381,0.3501,3.7173  C8.4961,20.4607,9.1138,21,9.8193,21H17.5c0.8271,0,1.5-0.6729,1.5-1.5v-7C19,11.6729,18.3271,11,17.5,11z" />
-    </g>
-  </svg>
-) as TeamsSvgIconSpec
diff --git a/src/themes/teams-dark/components/Icon/svg/icons/callIncomingVideoOff.tsx b/src/themes/teams-dark/components/Icon/svg/icons/callIncomingVideoOff.tsx
deleted file mode 100644
index 59e9cbf9ae..0000000000
--- a/src/themes/teams-dark/components/Icon/svg/icons/callIncomingVideoOff.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default (
-  <svg role="presentation" viewBox="-4 -4 40 40">
-    <path
-      d="M26,6.5859c0,0.1694-0.0615,0.3159-0.1855,0.4395L19.75,13.0996v7.2363c0,0.2539-0.0508,0.4941-0.1514,0.7227
-              s-0.2363,0.4258-0.4053,0.5957s-0.3682,0.3047-0.5957,0.4053s-0.4688,0.1514-0.7227,0.1514h-7.2363l-3.5742,3.5645
-              c-0.124,0.123-0.2705,0.1855-0.4395,0.1855s-0.3154-0.0625-0.4395-0.1855S6,25.5059,6,25.3359s0.0615-0.3164,0.1855-0.4395
-              l18.75-18.75c0.124-0.1235,0.2705-0.1855,0.4395-0.1855s0.3154,0.062,0.4395,0.1855S26,6.4165,26,6.5859z M19.0469,10.1406
-              l-0.8984,0.8887c-0.0908-0.0454-0.1826-0.0684-0.2734-0.0684H8.2754c-0.1885,0-0.3438,0.1074-0.4639,0.3223
-              s-0.2197,0.4917-0.2979,0.8301s-0.1348,0.7129-0.1709,1.123s-0.0605,0.8105-0.0732,1.2012S7.25,15.186,7.25,15.5117
-              s0,0.5664,0,0.7227c0,0.1304,0.002,0.3335,0.0049,0.6104c0.0029,0.2764,0.0127,0.5869,0.0293,0.9326s0.042,0.6992,0.0781,1.0645
-              s0.0908,0.7012,0.166,1.0107s0.1689,0.5654,0.2832,0.7666s0.2559,0.3125,0.4248,0.332l-0.9473,0.9473
-              c-0.2217-0.1504-0.4072-0.3662-0.5566-0.6494s-0.2715-0.6045-0.3662-0.9619s-0.168-0.7373-0.2197-1.1377
-              s-0.0879-0.7959-0.1074-1.1865s-0.0312-0.7598-0.0342-1.1084C6.002,16.5063,6,16.2085,6,15.9609
-              c0-0.3843,0.0029-0.7729,0.0098-1.167s0.0244-0.7861,0.0537-1.1768s0.0732-0.7798,0.1318-1.167s0.1396-0.7666,0.2441-1.1377
-              c0.0586-0.2212,0.1416-0.4297,0.249-0.625s0.2373-0.3647,0.3906-0.5078s0.3291-0.2573,0.5273-0.3418s0.4219-0.127,0.6689-0.127
-              h9.5996c0.2148,0,0.4229,0.0376,0.625,0.1123S18.8838,10.0039,19.0469,10.1406z M18.5,20.3359v-5.9863l-6.6113,6.6113h5.9863
-              c0.1689,0,0.3154-0.0625,0.4395-0.1855S18.5,20.5059,18.5,20.3359z M26,20.3359c0,0.1699-0.0615,0.3164-0.1855,0.4395
-              s-0.2705,0.1855-0.4395,0.1855s-0.3125-0.0586-0.4297-0.1758l-3.1641-3.0176c-0.2471-0.2344-0.4395-0.5098-0.5762-0.8252
-              C21.0684,16.6265,21,16.2993,21,15.9609s0.0684-0.6655,0.2051-0.9814s0.3291-0.5908,0.5762-0.8252l3.1641-3.0176
-              c0.1172-0.1172,0.2607-0.1758,0.4297-0.1758s0.3154,0.062,0.4395,0.1855S26,11.4165,26,11.5859V20.3359z M24.75,18.8711v-5.8203
-              l-2.1094,2.0117c-0.124,0.1108-0.2197,0.2456-0.2881,0.4053S22.25,15.7915,22.25,15.9609s0.0342,0.3335,0.1025,0.4932
-              s0.1641,0.2944,0.2881,0.4053L24.75,18.8711z"
-    />
-  </svg>
-) as TeamsSvgIconSpec
diff --git a/src/themes/teams-dark/components/Icon/svg/icons/callMicrophone.tsx b/src/themes/teams-dark/components/Icon/svg/icons/callMicrophone.tsx
deleted file mode 100644
index 0647f2f9ef..0000000000
--- a/src/themes/teams-dark/components/Icon/svg/icons/callMicrophone.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default (
-  <svg role="presentation" viewBox="0 0 40 40">
-    <path
-      d="M27.5,20.0002441c0,1.2558594-0.3085938,2.4482422-0.9277344,3.5742188
-            c-0.2988281,0.5341797-0.65625,1.0253906-1.0742188,1.4746094c-0.4160156,0.4492188-0.8789062,0.8466797-1.3867188,1.1914062
-            c-0.5136719,0.3447266-1.0664062,0.6230469-1.6552734,0.8349609s-1.1992188,0.34375-1.8310547,0.3955078v1.9042969
-            c0,0.1689453-0.0615234,0.3154297-0.1855469,0.4394531C20.3164062,29.9387207,20.1699219,30.0002441,20,30.0002441
-            c-0.1694336,0-0.315918-0.0615234-0.4394531-0.1855469S19.375,29.5441895,19.375,29.3752441v-1.9042969
-            c-0.6313477-0.0517578-1.2416992-0.1835938-1.8310547-0.3955078s-1.1411133-0.4902344-1.6552734-0.8349609
-            c-0.5078125-0.3447266-0.9702148-0.7441406-1.3867188-1.1962891s-0.7714844-0.9423828-1.0644531-1.4697266
-            c-0.2993164-0.5400391-0.5307617-1.1132812-0.6933594-1.71875S12.5,20.6311035,12.5,20.0002441
-            c0-0.1699219,0.0620117-0.3164062,0.1855469-0.4399414s0.2700195-0.1855469,0.4394531-0.1855469
-            s0.315918,0.0620117,0.4394531,0.1855469S13.75,19.8303223,13.75,20.0002441c0,1.1191406,0.2866211,2.1650391,0.859375,3.1347656
-            c0.2734375,0.4619141,0.6020508,0.8857422,0.9863281,1.2695312s0.8071289,0.7128906,1.2695312,0.9863281
-            c0.9702148,0.5732422,2.0151367,0.859375,3.1347656,0.859375c1.1201172,0,2.1650391-0.2861328,3.1347656-0.859375
-            c0.4628906-0.2734375,0.8867188-0.6025391,1.2695312-0.9863281c0.3847656-0.3837891,0.7128906-0.8076172,0.9863281-1.2695312
-            C25.9648438,22.1652832,26.25,21.1193848,26.25,20.0002441c0-0.1699219,0.0625-0.3164062,0.1855469-0.4399414
-            c0.125-0.1235352,0.2714844-0.1855469,0.4394531-0.1855469c0.1699219,0,0.3164062,0.0620117,0.4394531,0.1855469
-            C27.4394531,19.6838379,27.5,19.8303223,27.5,20.0002441z M23.75,13.7497559v6.2504883
-            c0,0.5009766-0.0976562,0.9794922-0.2929688,1.4355469c-0.1953125,0.4550781-0.4648438,0.8564453-0.8105469,1.2011719
-            c-0.3515625,0.3515625-0.7548828,0.625-1.2109375,0.8203125C20.9804688,23.6525879,20.5019531,23.7502441,20,23.7502441
-            c-0.5014648,0-0.9780273-0.0976562-1.4306641-0.2929688s-0.8544922-0.46875-1.2060547-0.8203125
-            s-0.625-0.7539062-0.8203125-1.2060547C16.3476562,20.9777832,16.25,20.5012207,16.25,20.0002441v-6.2504883
-            c0-0.5014648,0.0976562-0.9799805,0.2929688-1.4355469s0.46875-0.859375,0.8203125-1.2109375
-            c0.3452148-0.3452148,0.7456055-0.6152344,1.2011719-0.8105469S19.4985352,9.9997559,20,9.9997559
-            c0.5019531,0,0.9814453,0.0976562,1.4404297,0.2929688s0.8613281,0.465332,1.2060547,0.8105469
-            c0.3457031,0.3452148,0.6152344,0.7470703,0.8105469,1.2060547S23.75,13.248291,23.75,13.7497559z M22.5,20.0002441v-6.2504883
-            c0-0.3320312-0.0644531-0.6494141-0.1953125-0.9521484c-0.1298828-0.3027344-0.3125-0.5712891-0.546875-0.8056641
-            s-0.5029297-0.4165039-0.8056641-0.546875S20.3320312,11.2497559,20,11.2497559s-0.6494141,0.0649414-0.9521484,0.1953125
-            s-0.5712891,0.3125-0.8056641,0.546875s-0.4165039,0.5029297-0.546875,0.8056641S17.5,13.4177246,17.5,13.7497559v6.2504883
-            c0,0.3320312,0.0649414,0.6494141,0.1953125,0.9521484s0.3125,0.5712891,0.546875,0.8056641s0.5029297,0.4169922,0.8056641,0.546875
-            S19.6679688,22.5002441,20,22.5002441s0.6494141-0.0654297,0.9521484-0.1953125s0.5712891-0.3125,0.8056641-0.546875
-            s0.4169922-0.5029297,0.546875-0.8056641C22.4355469,20.6496582,22.5,20.3322754,22.5,20.0002441z"
-    />
-  </svg>
-) as TeamsSvgIconSpec
diff --git a/src/themes/teams-dark/components/Icon/svg/icons/callMicrophoneOff.tsx b/src/themes/teams-dark/components/Icon/svg/icons/callMicrophoneOff.tsx
deleted file mode 100644
index 9bffeb36a1..0000000000
--- a/src/themes/teams-dark/components/Icon/svg/icons/callMicrophoneOff.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default (
-  <svg role="presentation" viewBox="-4 -4 40 40">
-    <path
-      d="M26,6.625c0,0.1694-0.0615,0.3159-0.1855,0.4395L19.75,13.1387V16c0,0.5078-0.0996,0.9897-0.2979,1.4453
-                c-0.1982,0.4551-0.4688,0.8545-0.8105,1.1963s-0.7402,0.6123-1.1963,0.8105S16.5078,19.75,16,19.75
-                c-0.3906,0-0.7715-0.0605-1.1426-0.1807s-0.7129-0.2939-1.0254-0.5225l-1.7773,1.7871c0.5537,0.4492,1.1699,0.7969,1.8506,1.0449
-                S15.2842,22.25,16,22.25c0.5664,0,1.1152-0.0742,1.6455-0.2246s1.0273-0.3613,1.4893-0.6348s0.8857-0.6016,1.2695-0.9863
-                s0.7129-0.8066,0.9863-1.2695s0.4854-0.959,0.6348-1.4893S22.25,16.5664,22.25,16c0-0.1694,0.0615-0.3159,0.1855-0.4395
-                s0.2705-0.1855,0.4395-0.1855s0.3154,0.062,0.4395,0.1855S23.5,15.8306,23.5,16c0,0.6445-0.0811,1.2676-0.2441,1.8701
-                s-0.3926,1.1719-0.6885,1.709s-0.6523,1.0322-1.0693,1.4844s-0.8789,0.8486-1.3867,1.1865s-1.0566,0.6133-1.6455,0.8252
-                s-1.2031,0.3428-1.8408,0.3955v1.9043c0,0.1699-0.0615,0.3164-0.1855,0.4395S16.1689,26,16,26s-0.3154-0.0625-0.4395-0.1855
-                s-0.1855-0.2695-0.1855-0.4395v-1.9141c-0.7744-0.0645-1.5215-0.248-2.2412-0.5469s-1.375-0.6992-1.9678-1.2012l-4.1016,4.1016
-                C6.9404,25.9375,6.7939,26,6.625,26s-0.3154-0.0625-0.4395-0.1855S6,25.5449,6,25.375s0.0615-0.3164,0.1855-0.4395l18.75-18.75
-                C25.0596,6.062,25.2061,6,25.375,6s0.3154,0.062,0.4395,0.1855S26,6.4556,26,6.625z M10.4336,18.8125l-0.9277,0.918
-                c-0.3252-0.5664-0.5742-1.166-0.7471-1.7969S8.5,16.6577,8.5,16c0-0.1694,0.0615-0.3159,0.1855-0.4395S8.9561,15.375,9.125,15.375
-                s0.3154,0.062,0.4395,0.1855S9.75,15.8306,9.75,16c0,0.4883,0.0566,0.9702,0.1709,1.4453
-                C10.0352,17.9199,10.2061,18.377,10.4336,18.8125z M19.7305,9.5059L18.5,10.7363V9.75c0-0.3384-0.0664-0.6592-0.2002-0.9619
-                s-0.3145-0.5679-0.542-0.7959s-0.4932-0.4087-0.7959-0.542S16.3389,7.25,16,7.25s-0.6592,0.0669-0.9619,0.2002
-                s-0.5684,0.314-0.7959,0.542s-0.4082,0.4932-0.542,0.7959S13.5,9.4116,13.5,9.75v5.9863l-1.1328,1.1426
-                C12.2891,16.5991,12.25,16.3062,12.25,16V9.75c0-0.5078,0.0996-0.9897,0.2979-1.4453s0.4688-0.8545,0.8105-1.1963
-                s0.7402-0.6118,1.1963-0.8105S15.4922,6,16,6c0.4883,0,0.9502,0.0913,1.3867,0.2734s0.8232,0.4331,1.1621,0.752
-                s0.6123,0.6899,0.8203,1.1133S19.6982,9.0176,19.7305,9.5059z M18.5,16v-1.6113l-3.7695,3.7598
-                c0.1885,0.1113,0.3926,0.1973,0.6104,0.2588S15.7783,18.5,16,18.5c0.3389,0,0.6592-0.0664,0.9619-0.2002
-                s0.5684-0.3135,0.7959-0.542s0.4082-0.4932,0.542-0.7959S18.5,16.3384,18.5,16z"
-    />
-  </svg>
-) as TeamsSvgIconSpec
diff --git a/src/themes/teams-dark/components/Icon/svg/icons/index.ts b/src/themes/teams-dark/components/Icon/svg/icons/index.ts
deleted file mode 100644
index 3298f956ec..0000000000
--- a/src/themes/teams-dark/components/Icon/svg/icons/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { TeamsSvgIconSpec } from '../types'
-
-import call from './call'
-import callEnd from './callEnd'
-import callVideo from './callIncomingVideo'
-import callVideoOff from './callIncomingVideoOff'
-import callStartPresenting from './callControlPresentNew'
-import callStopPresenting from './callControlStopPresentingNew'
-import callMicrophone from './callMicrophone'
-import callMicrophoneOff from './callMicrophoneOff'
-import more from './more'
-import teamCreate from './teamCreate'
-import umbrella from './umbrella'
-
-export default {
-  call,
-  'call-end': callEnd,
-  'call-video': callVideo,
-  'call-video-off': callVideoOff,
-  'call-start-presenting': callStartPresenting,
-  'call-stop-presenting': callStopPresenting,
-  'call-microphone': callMicrophone,
-  'call-microphone-off': callMicrophoneOff,
-  more,
-  'team-create': teamCreate,
-  umbrella,
-} as { [iconName: string]: TeamsSvgIconSpec }
diff --git a/src/themes/teams-dark/components/Icon/svg/icons/more.tsx b/src/themes/teams-dark/components/Icon/svg/icons/more.tsx
deleted file mode 100644
index 1b53b7481d..0000000000
--- a/src/themes/teams-dark/components/Icon/svg/icons/more.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default (
-  <svg viewBox="0 0 32 32" role="presentation" focusable="false">
-    <g>
-      <circle cx="22" cy="16" r="2" />
-      <circle cx="16" cy="16" r="2" />
-      <circle cx="10" cy="16" r="2" />
-
-      <circle cx="22" cy="16" r="1.5" />
-      <circle cx="16" cy="16" r="1.5" />
-      <circle cx="10" cy="16" r="1.5" />
-    </g>
-  </svg>
-) as TeamsSvgIconSpec
diff --git a/src/themes/teams-dark/components/Icon/svg/icons/teamCreate.tsx b/src/themes/teams-dark/components/Icon/svg/icons/teamCreate.tsx
deleted file mode 100644
index e96ff59678..0000000000
--- a/src/themes/teams-dark/components/Icon/svg/icons/teamCreate.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default (
-  <svg viewBox="0 0 32 32" role="presentation" focusable="false">
-    <g>
-      <path
-        d="M10,11c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S11.1,11,10,11z M10,14c-0.6,0-1-0.4-1-1s0.4-1,1-1s1,0.4,1,1S10.6,14,10,14zM16,14c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S14.9,14,16,14z M16,11c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S15.4,11,16,11zM13,20c0,1.3,1.2,2,3,2c1.9,0,3-0.7,3-2v-5h-6V20z M14,16h4v4c0,1-1.7,1.1-2,1.1S14,21,14,20V16zM11.5,17c0.3,0,0.5-0.2,0.5-0.5c0-0.3-0.2-0.5-0.5-0.5H8v3c0,1.3,1.1,2,3,2h0.5c0.3,0,0.5-0.2,0.5-0.5
-                c0-0.3-0.2-0.5-0.5-0.5H11C10.7,20,9,20,9,19v-2H11.5zM23.5,10H22V8.5C22,8.2,21.8,8,21.5,8S21,8.2,21,8.5V10h-1.5c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5H21v1.5
-                c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V11h1.5c0.3,0,0.5-0.2,0.5-0.5S23.8,10,23.5,10z"
-      />
-      <path
-        d="M10,11c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S11.1,11,10,11z
-                M16,14c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S14.9,14,16,14z
-                M11.5,16H8v3c0,1.3,1.1,2,3,2h0.5c0.3,0,0.5-0.2,0.5-0.5v-4C12,16.2,11.8,16,11.5,16z
-                M13,20c0,1.3,1.2,2,3,2c1.9,0,3-0.7,3-2v-5h-6V20z
-                M23.5,10H22V8.5C22,8.2,21.8,8,21.5,8S21,8.2,21,8.5V10h-1.5c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5H21v1.5
-                c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V11h1.5c0.3,0,0.5-0.2,0.5-0.5S23.8,10,23.5,10z"
-      />
-    </g>
-  </svg>
-) as TeamsSvgIconSpec
diff --git a/src/themes/teams-dark/components/Icon/svg/icons/umbrella.tsx b/src/themes/teams-dark/components/Icon/svg/icons/umbrella.tsx
deleted file mode 100644
index 1f3801584d..0000000000
--- a/src/themes/teams-dark/components/Icon/svg/icons/umbrella.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default {
-  icon: ({ classes }) => (
-    <svg className={classes.svg} viewBox="0 0 34 34">
-      <path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291 0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0 0.547 0.444 0.991 1 0.991 0.552 0 1-0.451 1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825 15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224 0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z" />
-    </svg>
-  ),
-  styles: {
-    svg: ({ variables: v }) => ({
-      fill: v.color,
-    }),
-  },
-} as TeamsSvgIconSpec
diff --git a/src/themes/teams-dark/components/Icon/svg/index.ts b/src/themes/teams-dark/components/Icon/svg/index.ts
deleted file mode 100644
index 30bc887b4b..0000000000
--- a/src/themes/teams-dark/components/Icon/svg/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import svgIconsAndStyles from './icons'
-import { SvgIconSpecWithStyles, TeamsSvgIconSpec } from './types'
-
-export const getStyle = partName => {
-  return args => {
-    const { props } = args
-
-    const maybeIconSpec = svgIconsAndStyles[props.name]
-    const maybeIconStyles = maybeIconSpec && (maybeIconSpec as SvgIconSpecWithStyles).styles
-
-    if (maybeIconStyles && maybeIconStyles[partName]) {
-      return maybeIconStyles[partName](args)
-    }
-
-    return undefined
-  }
-}
-
-export default svgIconsAndStyles as { [iconName: string]: TeamsSvgIconSpec }
diff --git a/src/themes/teams-dark/components/Icon/svg/types.d.ts b/src/themes/teams-dark/components/Icon/svg/types.d.ts
deleted file mode 100644
index 6f2c2415c6..0000000000
--- a/src/themes/teams-dark/components/Icon/svg/types.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ComponentPartStyleFunction, SvgIconSpec } from '../../../../../../types/theme'
-import { ObjectOf } from '../../../../../../types/utils'
-import { IIconProps } from '../../../../../components/Icon/Icon'
-
-type SvgIconSpecWithStyles = {
-  icon: SvgIconSpec
-  styles: ObjectOf<ComponentPartStyleFunction<IIconProps, any>>
-}
-
-export type TeamsSvgIconSpec = SvgIconSpec | SvgIconSpecWithStyles
diff --git a/src/themes/teams-dark/index.ts b/src/themes/teams-dark/index.ts
index 47cecb488a..c544794cce 100644
--- a/src/themes/teams-dark/index.ts
+++ b/src/themes/teams-dark/index.ts
@@ -1,46 +1,11 @@
-import {
-  FontIconSpec,
-  IThemeInput,
-  SvgIconSpec,
-  ThemeIcons,
-  ThemeIconSpec,
-} from '../../../types/theme'
+import { IThemeInput } from '../../../types/theme'
 
 import * as siteVariables from './siteVariables'
 import * as componentVariables from './componentVariables'
 import * as componentStyles from './componentStyles'
 
-import { default as svgIconsAndStyles } from './components/Icon/svg'
-import { default as fontIcons } from './components/Icon/font'
-
-import { SvgIconSpecWithStyles, TeamsSvgIconSpec } from './components/Icon/svg/types'
-
-const declareSvg = (svgIcon: SvgIconSpec): ThemeIconSpec => ({
-  isSvg: true,
-  icon: svgIcon,
-})
-
-const declareFontBased = (fontIcon: FontIconSpec): ThemeIconSpec => ({ icon: fontIcon })
-
-const icons: ThemeIcons = Object.keys(svgIconsAndStyles as {
-  [iconName: string]: TeamsSvgIconSpec
-}).reduce<ThemeIcons>((accIcons, iconName) => {
-  const iconAndMaybeStyles = svgIconsAndStyles[iconName]
-
-  const icon: SvgIconSpec = (iconAndMaybeStyles as any).styles
-    ? (iconAndMaybeStyles as SvgIconSpecWithStyles).icon
-    : (iconAndMaybeStyles as SvgIconSpec)
-
-  return { ...accIcons, ...{ [iconName]: declareSvg(icon) } }
-}, {})
-
-Object.keys(fontIcons).forEach(iconName => {
-  icons[iconName] = declareFontBased(fontIcons[iconName])
-})
-
 export default {
   siteVariables,
   componentVariables,
   componentStyles,
-  icons,
 } as IThemeInput
diff --git a/src/themes/teams-high-contrast/componentStyles.ts b/src/themes/teams-high-contrast/componentStyles.ts
index 7b50231161..440bb906eb 100644
--- a/src/themes/teams-high-contrast/componentStyles.ts
+++ b/src/themes/teams-high-contrast/componentStyles.ts
@@ -1,3 +1 @@
 export { default as Button } from './components/Button/buttonStyles'
-
-export { default as Icon } from './components/Icon/iconStyles'
diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts
index ab16243c62..e17b98e8c2 100644
--- a/src/themes/teams-high-contrast/componentVariables.ts
+++ b/src/themes/teams-high-contrast/componentVariables.ts
@@ -1,3 +1 @@
 export { default as Button } from './components/Button/buttonVariables'
-
-export { default as Icon } from './components/Icon/iconVariables'
diff --git a/src/themes/teams-high-contrast/components/Button/buttonStyles.ts b/src/themes/teams-high-contrast/components/Button/buttonStyles.ts
index c87b2fea4e..e89e3c8ba3 100644
--- a/src/themes/teams-high-contrast/components/Button/buttonStyles.ts
+++ b/src/themes/teams-high-contrast/components/Button/buttonStyles.ts
@@ -4,43 +4,23 @@ import { IButtonProps } from '../../../../components/Button/Button'
 
 const buttonStyles: IComponentPartStylesInput<IButtonProps, any> = {
   root: ({ props, variables }): ICSSInJSStyle => {
-    const { circular, disabled, fluid, type, text, iconOnly, isFromKeyboard } = props
+    const { type, text } = props
     const primary = type === 'primary'
     const secondary = type === 'secondary'
 
     const {
-      height,
-      minWidth,
-      maxWidth,
-      borderRadius,
       color,
       backgroundColor,
       backgroundColorHover,
-      circularRadius,
-      paddingLeftRightValue,
-      typeDisabledButtonColor,
-      typeDisabledButtonBackgroundColor,
       typePrimaryColor,
       typePrimaryBackgroundColor,
-      typePrimaryBackgroundColorActive,
       typePrimaryBackgroundColorHover,
-      typePrimaryBackgroundColorFocus,
       typePrimaryBorderColor,
-      typePrimaryBorderColorFocus,
-      typePrimaryBorderColorInsetFocus,
       typeSecondaryColor,
       typeSecondaryBackgroundColor,
-      typeSecondaryBackgroundColorActive,
       typeSecondaryBackgroundColorHover,
-      typeSecondaryBackgroundColorFocus,
       typeSecondaryBorderColor,
-      typeSecondaryBorderColorActive,
       typeSecondaryBorderColorHover,
-      typeSecondaryBorderColorFocus,
-      typeSecondaryBorderColorInsetFocus,
-      typeTextColorHover,
-      typeTextPrimaryColor,
-      typeTextPrimaryColorHover,
       typeTextSecondaryColor,
       typeTextSecondaryColorHover,
     } = variables
@@ -72,10 +52,6 @@ const buttonStyles: IComponentPartStylesInput<IButtonProps, any> = {
           backgroundColor: typeSecondaryBackgroundColor,
           borderColor: typeSecondaryBorderColor,
           border: `${pxToRem(1)} solid ${typeSecondaryBorderColor}`,
-          ':active': {
-            backgroundColor: typeSecondaryBackgroundColorActive,
-            borderColor: typeSecondaryBorderColorActive,
-          },
           ':hover': {
             backgroundColor: typeSecondaryBackgroundColorHover,
             borderColor: typeSecondaryBorderColorHover,
diff --git a/src/themes/teams-high-contrast/components/Icon/font/index.ts b/src/themes/teams-high-contrast/components/Icon/font/index.ts
deleted file mode 100644
index 5e19b8d16b..0000000000
--- a/src/themes/teams-high-contrast/components/Icon/font/index.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { FontIconSpec } from 'theme'
-
-const fontAwesome = (iconCode: string): FontIconSpec => ({
-  fontFamily: 'Icons',
-  content: `'\\${iconCode}'`,
-})
-
-export default {
-  'call-home': fontAwesome('f015'),
-  'take-rest': fontAwesome('f0f4'),
-} as { [key: string]: FontIconSpec }
diff --git a/src/themes/teams-high-contrast/components/Icon/fontAwesomeIconStyles.ts b/src/themes/teams-high-contrast/components/Icon/fontAwesomeIconStyles.ts
deleted file mode 100644
index 920f99b92d..0000000000
--- a/src/themes/teams-high-contrast/components/Icon/fontAwesomeIconStyles.ts
+++ /dev/null
@@ -1,1304 +0,0 @@
-const fontAwesomeIcons = new Map([
-  // Deprecated *In/Out Naming Conflict)
-  ['linkedin in', 'f0e1'],
-  ['zoom in', 'f00e'],
-  ['zoom out', 'f010'],
-  ['sign in', 'f2f6'],
-  ['in cart', 'f218'],
-  ['log out', 'f2f5'],
-  ['sign out', 'f2f5'],
-
-  // Icons
-  ['500px', 'f26e'],
-  ['accessible icon', 'f368'],
-  ['accusoft', 'f369'],
-  ['address book', 'f2b9'],
-  ['address card', 'f2bb'],
-  ['adjust', 'f042'],
-  ['adn', 'f170'],
-  ['adversal', 'f36a'],
-  ['affiliatetheme', 'f36b'],
-  ['algolia', 'f36c'],
-  ['align center', 'f037'],
-  ['align justify', 'f039'],
-  ['align left', 'f036'],
-  ['align right', 'f038'],
-  ['amazon', 'f270'],
-  ['amazon pay', 'f42c'],
-  ['ambulance', 'f0f9'],
-  ['american sign language interpreting', 'f2a3'],
-  ['amilia', 'f36d'],
-  ['anchor', 'f13d'],
-  ['android', 'f17b'],
-  ['angellist', 'f209'],
-  ['angle double down', 'f103'],
-  ['angle double left', 'f100'],
-  ['angle double right', 'f101'],
-  ['angle double up', 'f102'],
-  ['angle down', 'f107'],
-  ['angle left', 'f104'],
-  ['angle right', 'f105'],
-  ['angle up', 'f106'],
-  ['angrycreative', 'f36e'],
-  ['angular', 'f420'],
-  ['app store', 'f36f'],
-  ['app store ios', 'f370'],
-  ['apper', 'f371'],
-  ['apple', 'f179'],
-  ['apple pay', 'f415'],
-  ['archive', 'f187'],
-  ['arrow alternate circle down', 'f358'],
-  ['arrow alternate circle left', 'f359'],
-  ['arrow alternate circle right', 'f35a'],
-  ['arrow alternate circle up', 'f35b'],
-  ['arrow circle down', 'f0ab'],
-  ['arrow circle left', 'f0a8'],
-  ['arrow circle right', 'f0a9'],
-  ['arrow circle up', 'f0aa'],
-  ['arrow down', 'f063'],
-  ['arrow left', 'f060'],
-  ['arrow right', 'f061'],
-  ['arrow up', 'f062'],
-  ['arrows alternate', 'f0b2'],
-  ['arrows alternate horizontal', 'f337'],
-  ['arrows alternate vertical', 'f338'],
-  ['assistive listening systems', 'f2a2'],
-  ['asterisk', 'f069'],
-  ['asymmetrik', 'f372'],
-  ['at', 'f1fa'],
-  ['audible', 'f373'],
-  ['audio description', 'f29e'],
-  ['autoprefixer', 'f41c'],
-  ['avianex', 'f374'],
-  ['aviato', 'f421'],
-  ['aws', 'f375'],
-  ['backward', 'f04a'],
-  ['balance scale', 'f24e'],
-  ['ban', 'f05e'],
-  ['band aid', 'f462'],
-  ['bandcamp', 'f2d5'],
-  ['barcode', 'f02a'],
-  ['bars', 'f0c9'],
-  ['baseball ball', 'f433'],
-  ['basketball ball', 'f434'],
-  ['bath', 'f2cd'],
-  ['battery empty', 'f244'],
-  ['battery full', 'f240'],
-  ['battery half', 'f242'],
-  ['battery quarter', 'f243'],
-  ['battery three quarters', 'f241'],
-  ['bed', 'f236'],
-  ['beer', 'f0fc'],
-  ['behance', 'f1b4'],
-  ['behance square', 'f1b5'],
-  ['bell', 'f0f3'],
-  ['bell slash', 'f1f6'],
-  ['bicycle', 'f206'],
-  ['bimobject', 'f378'],
-  ['binoculars', 'f1e5'],
-  ['birthday cake', 'f1fd'],
-  ['bitbucket', 'f171'],
-  ['bitcoin', 'f379'],
-  ['bity', 'f37a'],
-  ['black tie', 'f27e'],
-  ['blackberry', 'f37b'],
-  ['blind', 'f29d'],
-  ['blogger', 'f37c'],
-  ['blogger b', 'f37d'],
-  ['bluetooth', 'f293'],
-  ['bluetooth b', 'f294'],
-  ['bold', 'f032'],
-  ['bolt', 'f0e7'],
-  ['bomb', 'f1e2'],
-  ['book', 'f02d'],
-  ['bookmark', 'f02e'],
-  ['bowling ball', 'f436'],
-  ['box', 'f466'],
-  ['boxes', 'f468'],
-  ['braille', 'f2a1'],
-  ['briefcase', 'f0b1'],
-  ['btc', 'f15a'],
-  ['bug', 'f188'],
-  ['building', 'f1ad'],
-  ['bullhorn', 'f0a1'],
-  ['bullseye', 'f140'],
-  ['buromobelexperte', 'f37f'],
-  ['bus', 'f207'],
-  ['buysellads', 'f20d'],
-  ['calculator', 'f1ec'],
-  ['calendar', 'f133'],
-  ['calendar alternate', 'f073'],
-  ['calendar check', 'f274'],
-  ['calendar minus', 'f272'],
-  ['calendar plus', 'f271'],
-  ['calendar times', 'f273'],
-  ['camera', 'f030'],
-  ['camera retro', 'f083'],
-  ['car', 'f1b9'],
-  ['caret down', 'f0d7'],
-  ['caret left', 'f0d9'],
-  ['caret right', 'f0da'],
-  ['caret square down', 'f150'],
-  ['caret square left', 'f191'],
-  ['caret square right', 'f152'],
-  ['caret square up', 'f151'],
-  ['caret up', 'f0d8'],
-  ['cart arrow down', 'f218'],
-  ['cart plus', 'f217'],
-  ['cc amazon pay', 'f42d'],
-  ['cc amex', 'f1f3'],
-  ['cc apple pay', 'f416'],
-  ['cc diners club', 'f24c'],
-  ['cc discover', 'f1f2'],
-  ['cc jcb', 'f24b'],
-  ['cc mastercard', 'f1f1'],
-  ['cc paypal', 'f1f4'],
-  ['cc stripe', 'f1f5'],
-  ['cc visa', 'f1f0'],
-  ['centercode', 'f380'],
-  ['certificate', 'f0a3'],
-  ['chart area', 'f1fe'],
-  ['chart bar', 'f080'],
-  ['chart line', 'f201'],
-  ['chart pie', 'f200'],
-  ['check', 'f00c'],
-  ['check circle', 'f058'],
-  ['check square', 'f14a'],
-  ['chess', 'f439'],
-  ['chess bishop', 'f43a'],
-  ['chess board', 'f43c'],
-  ['chess king', 'f43f'],
-  ['chess knight', 'f441'],
-  ['chess pawn', 'f443'],
-  ['chess queen', 'f445'],
-  ['chess rook', 'f447'],
-  ['chevron circle down', 'f13a'],
-  ['chevron circle left', 'f137'],
-  ['chevron circle right', 'f138'],
-  ['chevron circle up', 'f139'],
-  ['chevron down', 'f078'],
-  ['chevron left', 'f053'],
-  ['chevron right', 'f054'],
-  ['chevron up', 'f077'],
-  ['child', 'f1ae'],
-  ['chrome', 'f268'],
-  ['circle', 'f111'],
-  ['circle notch', 'f1ce'],
-  ['clipboard', 'f328'],
-  ['clipboard check', 'f46c'],
-  ['clipboard list', 'f46d'],
-  ['clock', 'f017'],
-  ['clone', 'f24d'],
-  ['closed captioning', 'f20a'],
-  ['cloud', 'f0c2'],
-  ['cloudscale', 'f383'],
-  ['cloudsmith', 'f384'],
-  ['cloudversify', 'f385'],
-  ['code', 'f121'],
-  ['code branch', 'f126'],
-  ['codepen', 'f1cb'],
-  ['codiepie', 'f284'],
-  ['coffee', 'f0f4'],
-  ['cog', 'f013'],
-  ['cogs', 'f085'],
-  ['columns', 'f0db'],
-  ['comment', 'f075'],
-  ['comment alternate', 'f27a'],
-  ['comments', 'f086'],
-  ['compass', 'f14e'],
-  ['compress', 'f066'],
-  ['connectdevelop', 'f20e'],
-  ['contao', 'f26d'],
-  ['copy', 'f0c5'],
-  ['copyright', 'f1f9'],
-  ['cpanel', 'f388'],
-  ['creative commons', 'f25e'],
-  ['credit card', 'f09d'],
-  ['crop', 'f125'],
-  ['crosshairs', 'f05b'],
-  ['css3', 'f13c'],
-  ['css3 alternate', 'f38b'],
-  ['cube', 'f1b2'],
-  ['cubes', 'f1b3'],
-  ['cut', 'f0c4'],
-  ['cuttlefish', 'f38c'],
-  ['d and d', 'f38d'],
-  ['dashcube', 'f210'],
-  ['database', 'f1c0'],
-  ['deaf', 'f2a4'],
-  ['delicious', 'f1a5'],
-  ['deploydog', 'f38e'],
-  ['deskpro', 'f38f'],
-  ['desktop', 'f108'],
-  ['deviantart', 'f1bd'],
-  ['digg', 'f1a6'],
-  ['digital ocean', 'f391'],
-  ['discord', 'f392'],
-  ['discourse', 'f393'],
-  ['dna', 'f471'],
-  ['dochub', 'f394'],
-  ['docker', 'f395'],
-  ['dollar sign', 'f155'],
-  ['dolly', 'f472'],
-  ['dolly flatbed', 'f474'],
-  ['dot circle', 'f192'],
-  ['download', 'f019'],
-  ['draft2digital', 'f396'],
-  ['dribbble', 'f17d'],
-  ['dribbble square', 'f397'],
-  ['dropbox', 'f16b'],
-  ['drupal', 'f1a9'],
-  ['dyalog', 'f399'],
-  ['earlybirds', 'f39a'],
-  ['edge', 'f282'],
-  ['edit', 'f044'],
-  ['eject', 'f052'],
-  ['elementor', 'f430'],
-  ['ellipsis horizontal', 'f141'],
-  ['ellipsis vertical', 'f142'],
-  ['ember', 'f423'],
-  ['empire', 'f1d1'],
-  ['envelope', 'f0e0'],
-  ['envelope open', 'f2b6'],
-  ['envelope square', 'f199'],
-  ['envira', 'f299'],
-  ['eraser', 'f12d'],
-  ['erlang', 'f39d'],
-  ['ethereum', 'f42e'],
-  ['etsy', 'f2d7'],
-  ['euro sign', 'f153'],
-  ['exchange alternate', 'f362'],
-  ['exclamation', 'f12a'],
-  ['exclamation circle', 'f06a'],
-  ['exclamation triangle', 'f071'],
-  ['expand', 'f065'],
-  ['expand arrows alternate', 'f31e'],
-  ['expeditedssl', 'f23e'],
-  ['external alternate', 'f35d'],
-  ['external square alternate', 'f360'],
-  ['eye', 'f06e'],
-  ['eye dropper', 'f1fb'],
-  ['eye slash', 'f070'],
-  ['facebook', 'f09a'],
-  ['facebook f', 'f39e'],
-  ['facebook messenger', 'f39f'],
-  ['facebook square', 'f082'],
-  ['fast backward', 'f049'],
-  ['fast forward', 'f050'],
-  ['fax', 'f1ac'],
-  ['female', 'f182'],
-  ['fighter jet', 'f0fb'],
-  ['file', 'f15b'],
-  ['file alternate', 'f15c'],
-  ['file archive', 'f1c6'],
-  ['file audio', 'f1c7'],
-  ['file code', 'f1c9'],
-  ['file excel', 'f1c3'],
-  ['file image', 'f1c5'],
-  ['file pdf', 'f1c1'],
-  ['file powerpoint', 'f1c4'],
-  ['file video', 'f1c8'],
-  ['file word', 'f1c2'],
-  ['film', 'f008'],
-  ['filter', 'f0b0'],
-  ['fire', 'f06d'],
-  ['fire extinguisher', 'f134'],
-  ['firefox', 'f269'],
-  ['first aid', 'f479'],
-  ['first order', 'f2b0'],
-  ['firstdraft', 'f3a1'],
-  ['flag', 'f024'],
-  ['flag checkered', 'f11e'],
-  ['flask', 'f0c3'],
-  ['flickr', 'f16e'],
-  ['flipboard', 'f44d'],
-  ['fly', 'f417'],
-  ['folder', 'f07b'],
-  ['folder open', 'f07c'],
-  ['font', 'f031'],
-  ['font awesome', 'f2b4'],
-  ['font awesome alternate', 'f35c'],
-  ['font awesome flag', 'f425'],
-  ['fonticons', 'f280'],
-  ['fonticons fi', 'f3a2'],
-  ['football ball', 'f44e'],
-  ['fort awesome', 'f286'],
-  ['fort awesome alternate', 'f3a3'],
-  ['forumbee', 'f211'],
-  ['forward', 'f04e'],
-  ['foursquare', 'f180'],
-  ['free code camp', 'f2c5'],
-  ['freebsd', 'f3a4'],
-  ['frown', 'f119'],
-  ['futbol', 'f1e3'],
-  ['gamepad', 'f11b'],
-  ['gavel', 'f0e3'],
-  ['gem', 'f3a5'],
-  ['genderless', 'f22d'],
-  ['get pocket', 'f265'],
-  ['gg', 'f260'],
-  ['gg circle', 'f261'],
-  ['gift', 'f06b'],
-  ['git', 'f1d3'],
-  ['git square', 'f1d2'],
-  ['github', 'f09b'],
-  ['github alternate', 'f113'],
-  ['github square', 'f092'],
-  ['gitkraken', 'f3a6'],
-  ['gitlab', 'f296'],
-  ['gitter', 'f426'],
-  ['glass martini', 'f000'],
-  ['glide', 'f2a5'],
-  ['glide g', 'f2a6'],
-  ['globe', 'f0ac'],
-  ['gofore', 'f3a7'],
-  ['golf ball', 'f450'],
-  ['goodreads', 'f3a8'],
-  ['goodreads g', 'f3a9'],
-  ['google', 'f1a0'],
-  ['google drive', 'f3aa'],
-  ['google play', 'f3ab'],
-  ['google plus', 'f2b3'],
-  ['google plus g', 'f0d5'],
-  ['google plus square', 'f0d4'],
-  ['google wallet', 'f1ee'],
-  ['graduation cap', 'f19d'],
-  ['gratipay', 'f184'],
-  ['grav', 'f2d6'],
-  ['gripfire', 'f3ac'],
-  ['grunt', 'f3ad'],
-  ['gulp', 'f3ae'],
-  ['h square', 'f0fd'],
-  ['hacker news', 'f1d4'],
-  ['hacker news square', 'f3af'],
-  ['hand lizard', 'f258'],
-  ['hand paper', 'f256'],
-  ['hand peace', 'f25b'],
-  ['hand point down', 'f0a7'],
-  ['hand point left', 'f0a5'],
-  ['hand point right', 'f0a4'],
-  ['hand point up', 'f0a6'],
-  ['hand pointer', 'f25a'],
-  ['hand rock', 'f255'],
-  ['hand scissors', 'f257'],
-  ['hand spock', 'f259'],
-  ['handshake', 'f2b5'],
-  ['hashtag', 'f292'],
-  ['hdd', 'f0a0'],
-  ['heading', 'f1dc'],
-  ['headphones', 'f025'],
-  ['heart', 'f004'],
-  ['heartbeat', 'f21e'],
-  ['hips', 'f452'],
-  ['hire a helper', 'f3b0'],
-  ['history', 'f1da'],
-  ['hockey puck', 'f453'],
-  ['home', 'f015'],
-  ['hooli', 'f427'],
-  ['hospital', 'f0f8'],
-  ['hospital symbol', 'f47e'],
-  ['hotjar', 'f3b1'],
-  ['hourglass', 'f254'],
-  ['hourglass end', 'f253'],
-  ['hourglass half', 'f252'],
-  ['hourglass start', 'f251'],
-  ['houzz', 'f27c'],
-  ['html5', 'f13b'],
-  ['hubspot', 'f3b2'],
-  ['i cursor', 'f246'],
-  ['id badge', 'f2c1'],
-  ['id card', 'f2c2'],
-  ['image', 'f03e'],
-  ['images', 'f302'],
-  ['imdb', 'f2d8'],
-  ['inbox', 'f01c'],
-  ['indent', 'f03c'],
-  ['industry', 'f275'],
-  ['info', 'f129'],
-  ['info circle', 'f05a'],
-  ['instagram', 'f16d'],
-  ['internet explorer', 'f26b'],
-  ['ioxhost', 'f208'],
-  ['italic', 'f033'],
-  ['itunes', 'f3b4'],
-  ['itunes note', 'f3b5'],
-  ['jenkins', 'f3b6'],
-  ['joget', 'f3b7'],
-  ['joomla', 'f1aa'],
-  ['js', 'f3b8'],
-  ['js square', 'f3b9'],
-  ['jsfiddle', 'f1cc'],
-  ['key', 'f084'],
-  ['keyboard', 'f11c'],
-  ['keycdn', 'f3ba'],
-  ['kickstarter', 'f3bb'],
-  ['kickstarter k', 'f3bc'],
-  ['korvue', 'f42f'],
-  ['language', 'f1ab'],
-  ['laptop', 'f109'],
-  ['laravel', 'f3bd'],
-  ['lastfm', 'f202'],
-  ['lastfm square', 'f203'],
-  ['leaf', 'f06c'],
-  ['leanpub', 'f212'],
-  ['lemon', 'f094'],
-  ['less', 'f41d'],
-  ['level down alternate', 'f3be'],
-  ['level up alternate', 'f3bf'],
-  ['life ring', 'f1cd'],
-  ['lightbulb', 'f0eb'],
-  ['linechat', 'f3c0'],
-  ['linkify', 'f0c1'],
-  ['linkedin', 'f08c'],
-  ['linkedin alt', 'f0e1'],
-  ['linode', 'f2b8'],
-  ['linux', 'f17c'],
-  ['lira sign', 'f195'],
-  ['list', 'f03a'],
-  ['list alternate', 'f022'],
-  ['list ol', 'f0cb'],
-  ['list ul', 'f0ca'],
-  ['location arrow', 'f124'],
-  ['lock', 'f023'],
-  ['lock open', 'f3c1'],
-  ['long arrow alternate down', 'f309'],
-  ['long arrow alternate left', 'f30a'],
-  ['long arrow alternate right', 'f30b'],
-  ['long arrow alternate up', 'f30c'],
-  ['low vision', 'f2a8'],
-  ['lyft', 'f3c3'],
-  ['magento', 'f3c4'],
-  ['magic', 'f0d0'],
-  ['magnet', 'f076'],
-  ['male', 'f183'],
-  ['map', 'f279'],
-  ['map marker', 'f041'],
-  ['map marker alternate', 'f3c5'],
-  ['map pin', 'f276'],
-  ['map signs', 'f277'],
-  ['mars', 'f222'],
-  ['mars double', 'f227'],
-  ['mars stroke', 'f229'],
-  ['mars stroke horizontal', 'f22b'],
-  ['mars stroke vertical', 'f22a'],
-  ['maxcdn', 'f136'],
-  ['medapps', 'f3c6'],
-  ['medium', 'f23a'],
-  ['medium m', 'f3c7'],
-  ['medkit', 'f0fa'],
-  ['medrt', 'f3c8'],
-  ['meetup', 'f2e0'],
-  ['meh', 'f11a'],
-  ['mercury', 'f223'],
-  ['microchip', 'f2db'],
-  ['microphone', 'f130'],
-  ['microphone slash', 'f131'],
-  ['microsoft', 'f3ca'],
-  ['minus', 'f068'],
-  ['minus circle', 'f056'],
-  ['minus square', 'f146'],
-  ['mix', 'f3cb'],
-  ['mixcloud', 'f289'],
-  ['mizuni', 'f3cc'],
-  ['mobile', 'f10b'],
-  ['mobile alternate', 'f3cd'],
-  ['modx', 'f285'],
-  ['monero', 'f3d0'],
-  ['money bill alternate', 'f3d1'],
-  ['moon', 'f186'],
-  ['motorcycle', 'f21c'],
-  ['mouse pointer', 'f245'],
-  ['music', 'f001'],
-  ['napster', 'f3d2'],
-  ['neuter', 'f22c'],
-  ['newspaper', 'f1ea'],
-  ['nintendo switch', 'f418'],
-  ['node', 'f419'],
-  ['node js', 'f3d3'],
-  ['npm', 'f3d4'],
-  ['ns8', 'f3d5'],
-  ['nutritionix', 'f3d6'],
-  ['object group', 'f247'],
-  ['object ungroup', 'f248'],
-  ['odnoklassniki', 'f263'],
-  ['odnoklassniki square', 'f264'],
-  ['opencart', 'f23d'],
-  ['openid', 'f19b'],
-  ['opera', 'f26a'],
-  ['optin monster', 'f23c'],
-  ['osi', 'f41a'],
-  ['outdent', 'f03b'],
-  ['page4', 'f3d7'],
-  ['pagelines', 'f18c'],
-  ['paint brush', 'f1fc'],
-  ['palfed', 'f3d8'],
-  ['pallet', 'f482'],
-  ['paper plane', 'f1d8'],
-  ['paperclip', 'f0c6'],
-  ['paragraph', 'f1dd'],
-  ['paste', 'f0ea'],
-  ['patreon', 'f3d9'],
-  ['pause', 'f04c'],
-  ['pause circle', 'f28b'],
-  ['paw', 'f1b0'],
-  ['paypal', 'f1ed'],
-  ['pen square', 'f14b'],
-  ['pencil alternate', 'f303'],
-  ['percent', 'f295'],
-  ['periscope', 'f3da'],
-  ['phabricator', 'f3db'],
-  ['phoenix framework', 'f3dc'],
-  ['phone', 'f095'],
-  ['phone square', 'f098'],
-  ['phone volume', 'f2a0'],
-  ['php', 'f457'],
-  ['pied piper', 'f2ae'],
-  ['pied piper alternate', 'f1a8'],
-  ['pied piper pp', 'f1a7'],
-  ['pills', 'f484'],
-  ['pinterest', 'f0d2'],
-  ['pinterest p', 'f231'],
-  ['pinterest square', 'f0d3'],
-  ['plane', 'f072'],
-  ['play', 'f04b'],
-  ['play circle', 'f144'],
-  ['playstation', 'f3df'],
-  ['plug', 'f1e6'],
-  ['plus', 'f067'],
-  ['plus circle', 'f055'],
-  ['plus square', 'f0fe'],
-  ['podcast', 'f2ce'],
-  ['pound sign', 'f154'],
-  ['power off', 'f011'],
-  ['print', 'f02f'],
-  ['product hunt', 'f288'],
-  ['pushed', 'f3e1'],
-  ['puzzle piece', 'f12e'],
-  ['python', 'f3e2'],
-  ['qq', 'f1d6'],
-  ['qrcode', 'f029'],
-  ['question', 'f128'],
-  ['question circle', 'f059'],
-  ['quidditch', 'f458'],
-  ['quinscape', 'f459'],
-  ['quora', 'f2c4'],
-  ['quote left', 'f10d'],
-  ['quote right', 'f10e'],
-  ['random', 'f074'],
-  ['ravelry', 'f2d9'],
-  ['react', 'f41b'],
-  ['rebel', 'f1d0'],
-  ['recycle', 'f1b8'],
-  ['redriver', 'f3e3'],
-  ['reddit', 'f1a1'],
-  ['reddit alien', 'f281'],
-  ['reddit square', 'f1a2'],
-  ['redo', 'f01e'],
-  ['redo alternate', 'f2f9'],
-  ['registered', 'f25d'],
-  ['rendact', 'f3e4'],
-  ['renren', 'f18b'],
-  ['reply', 'f3e5'],
-  ['reply all', 'f122'],
-  ['replyd', 'f3e6'],
-  ['resolving', 'f3e7'],
-  ['retweet', 'f079'],
-  ['road', 'f018'],
-  ['rocket', 'f135'],
-  ['rocketchat', 'f3e8'],
-  ['rockrms', 'f3e9'],
-  ['rss', 'f09e'],
-  ['rss square', 'f143'],
-  ['ruble sign', 'f158'],
-  ['rupee sign', 'f156'],
-  ['safari', 'f267'],
-  ['sass', 'f41e'],
-  ['save', 'f0c7'],
-  ['schlix', 'f3ea'],
-  ['scribd', 'f28a'],
-  ['search', 'f002'],
-  ['search minus', 'f010'],
-  ['search plus', 'f00e'],
-  ['searchengin', 'f3eb'],
-  ['sellcast', 'f2da'],
-  ['sellsy', 'f213'],
-  ['server', 'f233'],
-  ['servicestack', 'f3ec'],
-  ['share', 'f064'],
-  ['share alternate', 'f1e0'],
-  ['share alternate square', 'f1e1'],
-  ['share square', 'f14d'],
-  ['shekel sign', 'f20b'],
-  ['shield alternate', 'f3ed'],
-  ['ship', 'f21a'],
-  ['shipping fast', 'f48b'],
-  ['shirtsinbulk', 'f214'],
-  ['shopping bag', 'f290'],
-  ['shopping basket', 'f291'],
-  ['shopping cart', 'f07a'],
-  ['shower', 'f2cc'],
-  ['sign language', 'f2a7'],
-  ['signal', 'f012'],
-  ['simplybuilt', 'f215'],
-  ['sistrix', 'f3ee'],
-  ['sitemap', 'f0e8'],
-  ['skyatlas', 'f216'],
-  ['skype', 'f17e'],
-  ['slack', 'f198'],
-  ['slack hash', 'f3ef'],
-  ['sliders horizontal', 'f1de'],
-  ['slideshare', 'f1e7'],
-  ['smile', 'f118'],
-  ['snapchat', 'f2ab'],
-  ['snapchat ghost', 'f2ac'],
-  ['snapchat square', 'f2ad'],
-  ['snowflake', 'f2dc'],
-  ['sort', 'f0dc'],
-  ['sort alphabet down', 'f15d'],
-  ['sort alphabet up', 'f15e'],
-  ['sort amount down', 'f160'],
-  ['sort amount up', 'f161'],
-  ['sort down', 'f0dd'],
-  ['sort numeric down', 'f162'],
-  ['sort numeric up', 'f163'],
-  ['sort up', 'f0de'],
-  ['soundcloud', 'f1be'],
-  ['space shuttle', 'f197'],
-  ['speakap', 'f3f3'],
-  ['spinner', 'f110'],
-  ['spotify', 'f1bc'],
-  ['square', 'f0c8'],
-  ['square full', 'f45c'],
-  ['stack exchange', 'f18d'],
-  ['stack overflow', 'f16c'],
-  ['star', 'f005'],
-  ['star half', 'f089'],
-  ['staylinked', 'f3f5'],
-  ['steam', 'f1b6'],
-  ['steam square', 'f1b7'],
-  ['steam symbol', 'f3f6'],
-  ['step backward', 'f048'],
-  ['step forward', 'f051'],
-  ['stethoscope', 'f0f1'],
-  ['sticker mule', 'f3f7'],
-  ['sticky note', 'f249'],
-  ['stop', 'f04d'],
-  ['stop circle', 'f28d'],
-  ['stopwatch', 'f2f2'],
-  ['strava', 'f428'],
-  ['street view', 'f21d'],
-  ['strikethrough', 'f0cc'],
-  ['stripe', 'f429'],
-  ['stripe s', 'f42a'],
-  ['studiovinari', 'f3f8'],
-  ['stumbleupon', 'f1a4'],
-  ['stumbleupon circle', 'f1a3'],
-  ['subscript', 'f12c'],
-  ['subway', 'f239'],
-  ['suitcase', 'f0f2'],
-  ['sun', 'f185'],
-  ['superpowers', 'f2dd'],
-  ['superscript', 'f12b'],
-  ['supple', 'f3f9'],
-  ['sync', 'f021'],
-  ['sync alternate', 'f2f1'],
-  ['syringe', 'f48e'],
-  ['table', 'f0ce'],
-  ['table tennis', 'f45d'],
-  ['tablet', 'f10a'],
-  ['tablet alternate', 'f3fa'],
-  ['tachometer alternate', 'f3fd'],
-  ['tag', 'f02b'],
-  ['tags', 'f02c'],
-  ['tasks', 'f0ae'],
-  ['taxi', 'f1ba'],
-  ['telegram', 'f2c6'],
-  ['telegram plane', 'f3fe'],
-  ['tencent weibo', 'f1d5'],
-  ['terminal', 'f120'],
-  ['text height', 'f034'],
-  ['text width', 'f035'],
-  ['th', 'f00a'],
-  ['th large', 'f009'],
-  ['th list', 'f00b'],
-  ['themeisle', 'f2b2'],
-  ['thermometer', 'f491'],
-  ['thermometer empty', 'f2cb'],
-  ['thermometer full', 'f2c7'],
-  ['thermometer half', 'f2c9'],
-  ['thermometer quarter', 'f2ca'],
-  ['thermometer three quarters', 'f2c8'],
-  ['thumbs down', 'f165'],
-  ['thumbs up', 'f164'],
-  ['thumbtack', 'f08d'],
-  ['ticket alternate', 'f3ff'],
-  ['times', 'f00d'],
-  ['times circle', 'f057'],
-  ['tint', 'f043'],
-  ['toggle off', 'f204'],
-  ['toggle on', 'f205'],
-  ['trademark', 'f25c'],
-  ['train', 'f238'],
-  ['transgender', 'f224'],
-  ['transgender alternate', 'f225'],
-  ['trash', 'f1f8'],
-  ['trash alternate', 'f2ed'],
-  ['tree', 'f1bb'],
-  ['trello', 'f181'],
-  ['tripadvisor', 'f262'],
-  ['trophy', 'f091'],
-  ['truck', 'f0d1'],
-  ['tty', 'f1e4'],
-  ['tumblr', 'f173'],
-  ['tumblr square', 'f174'],
-  ['tv', 'f26c'],
-  ['twitch', 'f1e8'],
-  ['twitter', 'f099'],
-  ['twitter square', 'f081'],
-  ['typo3', 'f42b'],
-  ['uber', 'f402'],
-  ['uikit', 'f403'],
-  ['umbrella', 'f0e9'],
-  ['underline', 'f0cd'],
-  ['undo', 'f0e2'],
-  ['undo alternate', 'f2ea'],
-  ['uniregistry', 'f404'],
-  ['universal access', 'f29a'],
-  ['university', 'f19c'],
-  ['unlink', 'f127'],
-  ['unlock', 'f09c'],
-  ['unlock alternate', 'f13e'],
-  ['untappd', 'f405'],
-  ['upload', 'f093'],
-  ['usb', 'f287'],
-  ['user', 'f007'],
-  ['user circle', 'f2bd'],
-  ['user md', 'f0f0'],
-  ['user plus', 'f234'],
-  ['user secret', 'f21b'],
-  ['user times', 'f235'],
-  ['users', 'f0c0'],
-  ['ussunnah', 'f407'],
-  ['utensil spoon', 'f2e5'],
-  ['utensils', 'f2e7'],
-  ['vaadin', 'f408'],
-  ['venus', 'f221'],
-  ['venus double', 'f226'],
-  ['venus mars', 'f228'],
-  ['viacoin', 'f237'],
-  ['viadeo', 'f2a9'],
-  ['viadeo square', 'f2aa'],
-  ['viber', 'f409'],
-  ['video', 'f03d'],
-  ['vimeo', 'f40a'],
-  ['vimeo square', 'f194'],
-  ['vimeo v', 'f27d'],
-  ['vine', 'f1ca'],
-  ['vk', 'f189'],
-  ['vnv', 'f40b'],
-  ['volleyball ball', 'f45f'],
-  ['volume down', 'f027'],
-  ['volume off', 'f026'],
-  ['volume up', 'f028'],
-  ['vuejs', 'f41f'],
-  ['warehouse', 'f494'],
-  ['weibo', 'f18a'],
-  ['weight', 'f496'],
-  ['weixin', 'f1d7'],
-  ['whatsapp', 'f232'],
-  ['whatsapp square', 'f40c'],
-  ['wheelchair', 'f193'],
-  ['whmcs', 'f40d'],
-  ['wifi', 'f1eb'],
-  ['wikipedia w', 'f266'],
-  ['window close', 'f410'],
-  ['window maximize', 'f2d0'],
-  ['window minimize', 'f2d1'],
-  ['window restore', 'f2d2'],
-  ['windows', 'f17a'],
-  ['won sign', 'f159'],
-  ['wordpress', 'f19a'],
-  ['wordpress simple', 'f411'],
-  ['wpbeginner', 'f297'],
-  ['wpexplorer', 'f2de'],
-  ['wpforms', 'f298'],
-  ['wrench', 'f0ad'],
-  ['xbox', 'f412'],
-  ['xing', 'f168'],
-  ['xing square', 'f169'],
-  ['y combinator', 'f23b'],
-  ['yahoo', 'f19e'],
-  ['yandex', 'f413'],
-  ['yandex international', 'f414'],
-  ['yelp', 'f1e9'],
-  ['yen sign', 'f157'],
-  ['yoast', 'f2b1'],
-  ['youtube', 'f167'],
-  ['youtube square', 'f431'],
-
-  // Aliases
-  ['chess rock', 'f447'],
-  ['ordered list', 'f0cb'],
-  ['unordered list', 'f0ca'],
-  ['user doctor', 'f0f0'],
-  ['shield', 'f3ed'],
-  ['puzzle', 'f12e'],
-  ['credit card amazon pay', 'f42d'],
-  ['credit card american express', 'f1f3'],
-  ['credit card diners club', 'f24c'],
-  ['credit card discover', 'f1f2'],
-  ['credit card jcb', 'f24b'],
-  ['credit card mastercard', 'f1f1'],
-  ['credit card paypal', 'f1f4'],
-  ['credit card stripe', 'f1f5'],
-  ['credit card visa', 'f1f0'],
-  ['add circle', 'f055'],
-  ['add square', 'f0fe'],
-  ['add to calendar', 'f271'],
-  ['add to cart', 'f217'],
-  ['add user', 'f234'],
-  ['add', 'f067'],
-  ['alarm mute', 'f1f6'],
-  ['alarm', 'f0f3'],
-  ['ald', 'f2a2'],
-  ['als', 'f2a2'],
-  ['american express card', 'f1f3'],
-  ['american express', 'f1f3'],
-  ['amex', 'f1f3'],
-  ['announcement', 'f0a1'],
-  ['area chart', 'f1fe'],
-  ['area graph', 'f1fe'],
-  ['arrow down cart', 'f218'],
-  ['asexual', 'f22d'],
-  ['asl interpreting', 'f2a3'],
-  ['asl', 'f2a3'],
-  ['assistive listening devices', 'f2a2'],
-  ['attach', 'f0c6'],
-  ['attention', 'f06a'],
-  ['balance', 'f24e'],
-  ['bar', 'f0fc'],
-  ['bathtub', 'f2cd'],
-  ['battery four', 'f240'],
-  ['battery high', 'f241'],
-  ['battery low', 'f243'],
-  ['battery medium', 'f242'],
-  ['battery one', 'f243'],
-  ['battery three', 'f241'],
-  ['battery two', 'f242'],
-  ['battery zero', 'f244'],
-  ['birthday', 'f1fd'],
-  ['block layout', 'f009'],
-  ['bluetooth alternative', 'f294'],
-  ['broken chain', 'f127'],
-  ['browser', 'f022'],
-  ['call square', 'f098'],
-  ['call', 'f095'],
-  ['cancel', 'f00d'],
-  ['cart', 'f07a'],
-  ['cc', 'f20a'],
-  ['chain', 'f0c1'],
-  ['chat', 'f075'],
-  ['checked calendar', 'f274'],
-  ['checkmark', 'f00c'],
-  ['circle notched', 'f1ce'],
-  ['close', 'f00d'],
-  ['cny', 'f157'],
-  ['cocktail', 'f000'],
-  ['commenting', 'f27a'],
-  ['computer', 'f108'],
-  ['configure', 'f0ad'],
-  ['content', 'f0c9'],
-  ['deafness', 'f2a4'],
-  ['delete calendar', 'f273'],
-  ['delete', 'f00d'],
-  ['detective', 'f21b'],
-  ['diners club card', 'f24c'],
-  ['diners club', 'f24c'],
-  ['discover card', 'f1f2'],
-  ['discover', 'f1f2'],
-  ['discussions', 'f086'],
-  ['doctor', 'f0f0'],
-  ['dollar', 'f155'],
-  ['dont', 'f05e'],
-  ['dribble', 'f17d'],
-  ['drivers license', 'f2c2'],
-  ['dropdown', 'f0d7'],
-  ['eercast', 'f2da'],
-  ['emergency', 'f0f9'],
-  ['envira gallery', 'f299'],
-  ['erase', 'f12d'],
-  ['eur', 'f153'],
-  ['euro', 'f153'],
-  ['eyedropper', 'f1fb'],
-  ['fa', 'f2b4'],
-  ['factory', 'f275'],
-  ['favorite', 'f005'],
-  ['feed', 'f09e'],
-  ['female homosexual', 'f226'],
-  ['file text', 'f15c'],
-  ['find', 'f1e5'],
-  ['first aid', 'f0fa'],
-  ['five hundred pixels', 'f26e'],
-  ['fork', 'f126'],
-  ['game', 'f11b'],
-  ['gay', 'f227'],
-  ['gbp', 'f154'],
-  ['gittip', 'f184'],
-  ['google plus circle', 'f2b3'],
-  ['google plus official', 'f2b3'],
-  ['grab', 'f255'],
-  ['graduation', 'f19d'],
-  ['grid layout', 'f00a'],
-  ['group', 'f0c0'],
-  ['h', 'f0fd'],
-  ['hand victory', 'f25b'],
-  ['handicap', 'f193'],
-  ['hard of hearing', 'f2a4'],
-  ['header', 'f1dc'],
-  ['help circle', 'f059'],
-  ['help', 'f128'],
-  ['heterosexual', 'f228'],
-  ['hide', 'f070'],
-  ['hotel', 'f236'],
-  ['hourglass four', 'f254'],
-  ['hourglass full', 'f254'],
-  ['hourglass one', 'f251'],
-  ['hourglass three', 'f253'],
-  ['hourglass two', 'f252'],
-  ['idea', 'f0eb'],
-  ['ils', 'f20b'],
-  ['in-cart', 'f218'],
-  ['inr', 'f156'],
-  ['intergender', 'f224'],
-  ['intersex', 'f224'],
-  ['japan credit bureau card', 'f24b'],
-  ['japan credit bureau', 'f24b'],
-  ['jcb', 'f24b'],
-  ['jpy', 'f157'],
-  ['krw', 'f159'],
-  ['lab', 'f0c3'],
-  ['law', 'f24e'],
-  ['legal', 'f0e3'],
-  ['lesbian', 'f226'],
-  ['lightning', 'f0e7'],
-  ['like', 'f004'],
-  ['line graph', 'f201'],
-  ['linkedin square', 'f08c'],
-  ['linkify', 'f0c1'],
-  ['lira', 'f195'],
-  ['list layout', 'f00b'],
-  ['magnify', 'f00e'],
-  ['mail forward', 'f064'],
-  ['mail square', 'f199'],
-  ['mail', 'f0e0'],
-  ['male homosexual', 'f227'],
-  ['man', 'f222'],
-  ['marker', 'f041'],
-  ['mars alternate', 'f229'],
-  ['mars horizontal', 'f22b'],
-  ['mars vertical', 'f22a'],
-  ['mastercard card', 'f1f1'],
-  ['mastercard', 'f1f1'],
-  ['microsoft edge', 'f282'],
-  ['military', 'f0fb'],
-  ['ms edge', 'f282'],
-  ['mute', 'f131'],
-  ['new pied piper', 'f2ae'],
-  ['non binary transgender', 'f223'],
-  ['numbered list', 'f0cb'],
-  ['optinmonster', 'f23c'],
-  ['options', 'f1de'],
-  ['other gender horizontal', 'f22b'],
-  ['other gender vertical', 'f22a'],
-  ['other gender', 'f229'],
-  ['payment', 'f09d'],
-  ['paypal card', 'f1f4'],
-  ['pencil square', 'f14b'],
-  ['photo', 'f030'],
-  ['picture', 'f03e'],
-  ['pie chart', 'f200'],
-  ['pie graph', 'f200'],
-  ['pied piper hat', 'f2ae'],
-  ['pin', 'f08d'],
-  ['plus cart', 'f217'],
-  ['pocket', 'f265'],
-  ['point', 'f041'],
-  ['pointing down', 'f0a7'],
-  ['pointing left', 'f0a5'],
-  ['pointing right', 'f0a4'],
-  ['pointing up', 'f0a6'],
-  ['pound', 'f154'],
-  ['power cord', 'f1e6'],
-  ['power', 'f011'],
-  ['privacy', 'f084'],
-  ['r circle', 'f25d'],
-  ['rain', 'f0e9'],
-  ['record', 'f03d'],
-  ['refresh', 'f021'],
-  ['remove circle', 'f057'],
-  ['remove from calendar', 'f272'],
-  ['remove user', 'f235'],
-  ['remove', 'f00d'],
-  ['repeat', 'f01e'],
-  ['rmb', 'f157'],
-  ['rouble', 'f158'],
-  ['rub', 'f158'],
-  ['ruble', 'f158'],
-  ['rupee', 'f156'],
-  ['s15', 'f2cd'],
-  ['selected radio', 'f192'],
-  ['send', 'f1d8'],
-  ['setting', 'f013'],
-  ['settings', 'f085'],
-  ['shekel', 'f20b'],
-  ['sheqel', 'f20b'],
-  ['shipping', 'f0d1'],
-  ['shop', 'f07a'],
-  ['shuffle', 'f074'],
-  ['shutdown', 'f011'],
-  ['sidebar', 'f0c9'],
-  ['signing', 'f2a7'],
-  ['signup', 'f044'],
-  ['sliders', 'f1de'],
-  ['soccer', 'f1e3'],
-  ['sort alphabet ascending', 'f15d'],
-  ['sort alphabet descending', 'f15e'],
-  ['sort ascending', 'f0de'],
-  ['sort content ascending', 'f160'],
-  ['sort content descending', 'f161'],
-  ['sort descending', 'f0dd'],
-  ['sort numeric ascending', 'f162'],
-  ['sort numeric descending', 'f163'],
-  ['sound', 'f025'],
-  ['spy', 'f21b'],
-  ['stripe card', 'f1f5'],
-  ['student', 'f19d'],
-  ['talk', 'f27a'],
-  ['target', 'f140'],
-  ['teletype', 'f1e4'],
-  ['television', 'f26c'],
-  ['text cursor', 'f246'],
-  ['text telephone', 'f1e4'],
-  ['theme isle', 'f2b2'],
-  ['theme', 'f043'],
-  ['thermometer', 'f2c7'],
-  ['thumb tack', 'f08d'],
-  ['time', 'f017'],
-  ['tm', 'f25c'],
-  ['toggle down', 'f150'],
-  ['toggle left', 'f191'],
-  ['toggle right', 'f152'],
-  ['toggle up', 'f151'],
-  ['translate', 'f1ab'],
-  ['travel', 'f0b1'],
-  ['treatment', 'f0f1'],
-  ['triangle down', 'f0d7'],
-  ['triangle left', 'f0d9'],
-  ['triangle right', 'f0da'],
-  ['triangle up', 'f0d8'],
-  ['try', 'f195'],
-  ['unhide', 'f06e'],
-  ['unlinkify', 'f127'],
-  ['unmute', 'f130'],
-  ['usd', 'f155'],
-  ['user cancel', 'f235'],
-  ['user close', 'f235'],
-  ['user delete', 'f235'],
-  ['user x', 'f235'],
-  ['vcard', 'f2bb'],
-  ['video camera', 'f03d'],
-  ['video play', 'f144'],
-  ['visa card', 'f1f0'],
-  ['visa', 'f1f0'],
-  ['volume control phone', 'f2a0'],
-  ['wait', 'f017'],
-  ['warning circle', 'f06a'],
-  ['warning sign', 'f071'],
-  ['warning', 'f12a'],
-  ['wechat', 'f1d7'],
-  ['wi-fi', 'f1eb'],
-  ['wikipedia', 'f266'],
-  ['winner', 'f091'],
-  ['wizard', 'f0d0'],
-  ['woman', 'f221'],
-  ['won', 'f159'],
-  ['wordpress beginner', 'f297'],
-  ['wordpress forms', 'f298'],
-  ['world', 'f0ac'],
-  ['write square', 'f14b'],
-  ['x', 'f00d'],
-  ['yc', 'f23b'],
-  ['ycombinator', 'f23b'],
-  ['yen', 'f157'],
-  ['zip', 'f187'],
-  ['zoom-in', 'f00e'],
-  ['zoom-out', 'f010'],
-  ['zoom', 'f00e'],
-  ['bitbucket square', 'f171'],
-  ['checkmark box', 'f14a'],
-  ['circle thin', 'f111'],
-  ['cloud download', 'f381'],
-  ['cloud upload', 'f382'],
-  ['compose', 'f303'],
-  ['conversation', 'f086'],
-  ['credit card alternative', 'f09d'],
-  ['currency', 'f3d1'],
-  ['dashboard', 'f3fd'],
-  ['diamond', 'f3a5'],
-  ['disk', 'f0a0'],
-  ['exchange', 'f362'],
-  ['external share', 'f14d'],
-  ['external square', 'f360'],
-  ['external', 'f35d'],
-  ['facebook official', 'f082'],
-  ['food', 'f2e7'],
-  ['hourglass zero', 'f253'],
-  ['level down', 'f3be'],
-  ['level up', 'f3bf'],
-  ['logout', 'f2f5'],
-  ['meanpath', 'f0c8'],
-  ['money', 'f3d1'],
-  ['move', 'f0b2'],
-  ['pencil', 'f303'],
-  ['protect', 'f023'],
-  ['radio', 'f192'],
-  ['remove bookmark', 'f02e'],
-  ['resize horizontal', 'f337'],
-  ['resize vertical', 'f338'],
-  ['sign-in', 'f2f6'],
-  ['sign-out', 'f2f5'],
-  ['spoon', 'f2e5'],
-  ['star half empty', 'f089'],
-  ['star half full', 'f089'],
-  ['ticket', 'f3ff'],
-  ['times rectangle', 'f410'],
-  ['write', 'f303'],
-  ['youtube play', 'f167'],
-  ['address book outline', 'f2b9'],
-  ['address card outline', 'f2bb'],
-  ['arrow alternate circle down outline', 'f358'],
-  ['arrow alternate circle left outline', 'f359'],
-  ['arrow alternate circle right outline', 'f35a'],
-  ['arrow alternate circle up outline', 'f35b'],
-  ['bell outline', 'f0f3'],
-  ['bell slash outline', 'f1f6'],
-  ['bookmark outline', 'f02e'],
-  ['building outline', 'f1ad'],
-  ['calendar outline', 'f133'],
-  ['calendar alternate outline', 'f073'],
-  ['calendar check outline', 'f274'],
-  ['calendar minus outline', 'f272'],
-  ['calendar plus outline', 'f271'],
-  ['calendar times outline', 'f273'],
-  ['caret square down outline', 'f150'],
-  ['caret square left outline', 'f191'],
-  ['caret square right outline', 'f152'],
-  ['caret square up outline', 'f151'],
-  ['chart bar outline', 'f080'],
-  ['check circle outline', 'f058'],
-  ['check square outline', 'f14a'],
-  ['circle outline', 'f111'],
-  ['clipboard outline', 'f328'],
-  ['clock outline', 'f017'],
-  ['clone outline', 'f24d'],
-  ['closed captioning outline', 'f20a'],
-  ['comment outline', 'f075'],
-  ['comment alternate outline', 'f27a'],
-  ['comments outline', 'f086'],
-  ['compass outline', 'f14e'],
-  ['copy outline', 'f0c5'],
-  ['copyright outline', 'f1f9'],
-  ['credit card outline', 'f09d'],
-  ['dot circle outline', 'f192'],
-  ['edit outline', 'f044'],
-  ['envelope outline', 'f0e0'],
-  ['envelope open outline', 'f2b6'],
-  ['eye slash outline', 'f070'],
-  ['file outline', 'f15b'],
-  ['file alternate outline', 'f15c'],
-  ['file archive outline', 'f1c6'],
-  ['file audio outline', 'f1c7'],
-  ['file code outline', 'f1c9'],
-  ['file excel outline', 'f1c3'],
-  ['file image outline', 'f1c5'],
-  ['file pdf outline', 'f1c1'],
-  ['file powerpoint outline', 'f1c4'],
-  ['file video outline', 'f1c8'],
-  ['file word outline', 'f1c2'],
-  ['flag outline', 'f024'],
-  ['folder outline', 'f07b'],
-  ['folder open outline', 'f07c'],
-  ['frown outline', 'f119'],
-  ['futbol outline', 'f1e3'],
-  ['gem outline', 'f3a5'],
-  ['hand lizard outline', 'f258'],
-  ['hand paper outline', 'f256'],
-  ['hand peace outline', 'f25b'],
-  ['hand point down outline', 'f0a7'],
-  ['hand point left outline', 'f0a5'],
-  ['hand point right outline', 'f0a4'],
-  ['hand point up outline', 'f0a6'],
-  ['hand pointer outline', 'f25a'],
-  ['hand rock outline', 'f255'],
-  ['hand scissors outline', 'f257'],
-  ['hand spock outline', 'f259'],
-  ['handshake outline', 'f2b5'],
-  ['hdd outline', 'f0a0'],
-  ['heart outline', 'f004'],
-  ['hospital outline', 'f0f8'],
-  ['hourglass outline', 'f254'],
-  ['id badge outline', 'f2c1'],
-  ['id card outline', 'f2c2'],
-  ['image outline', 'f03e'],
-  ['images outline', 'f302'],
-  ['keyboard outline', 'f11c'],
-  ['lemon outline', 'f094'],
-  ['life ring outline', 'f1cd'],
-  ['lightbulb outline', 'f0eb'],
-  ['list alternate outline', 'f022'],
-  ['map outline', 'f279'],
-  ['meh outline', 'f11a'],
-  ['minus square outline', 'f146'],
-  ['money bill alternate outline', 'f3d1'],
-  ['moon outline', 'f186'],
-  ['newspaper outline', 'f1ea'],
-  ['object group outline', 'f247'],
-  ['object ungroup outline', 'f248'],
-  ['paper plane outline', 'f1d8'],
-  ['pause circle outline', 'f28b'],
-  ['play circle outline', 'f144'],
-  ['plus square outline', 'f0fe'],
-  ['question circle outline', 'f059'],
-  ['registered outline', 'f25d'],
-  ['save outline', 'f0c7'],
-  ['share square outline', 'f14d'],
-  ['smile outline', 'f118'],
-  ['snowflake outline', 'f2dc'],
-  ['square outline', 'f0c8'],
-  ['star outline', 'f005'],
-  ['star half outline', 'f089'],
-  ['sticky note outline', 'f249'],
-  ['stop circle outline', 'f28d'],
-  ['sun outline', 'f185'],
-  ['thumbs down outline', 'f165'],
-  ['thumbs up outline', 'f164'],
-  ['times circle outline', 'f057'],
-  ['trash alternate outline', 'f2ed'],
-  ['user outline', 'f007'],
-  ['user circle outline', 'f2bd'],
-  ['window close outline', 'f410'],
-  ['window maximize outline', 'f2d0'],
-  ['window minimize outline', 'f2d1'],
-  ['window restore outline', 'f2d2'],
-  ['disk outline', 'f369'],
-
-  // Outline Aliases
-  ['heart empty', 'f004'],
-  ['star empty', 'f089'],
-])
-
-export default name => fontAwesomeIcons.get(name)
-
-/**
- * TODO We should probably declare a @fontface rule here
- */
diff --git a/src/themes/teams-high-contrast/components/Icon/iconStyles.ts b/src/themes/teams-high-contrast/components/Icon/iconStyles.ts
deleted file mode 100644
index 80b009ed84..0000000000
--- a/src/themes/teams-high-contrast/components/Icon/iconStyles.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import fontAwesomeIcons from './fontAwesomeIconStyles'
-import { callable } from '../../../../lib'
-import { disabledStyle, fittedStyle } from '../../../../styles/customCSS'
-import { FontIconSpec, IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
-import { ResultOf } from '../../../../../types/utils'
-import { IconXSpacing, IIconProps } from '../../../../components/Icon/Icon'
-
-import { getStyle as getSvgStyle } from './svg'
-
-const sizes = new Map([
-  ['micro', 0.3],
-  ['mini', 0.4],
-  ['tiny', 0.5],
-  ['small', 0.75],
-  ['normal', 1],
-  ['large', 1.5],
-  ['big', 2],
-  ['huge', 4],
-  ['massive', 8],
-])
-
-const getDefaultFontIcon = (iconName: string) => {
-  const fontFamily = iconName && iconName.includes('outline') ? 'outline-icons' : 'Icons'
-  const content = (iconName && `'\\${fontAwesomeIcons(iconName)}'`) || '?'
-
-  return { content, fontFamily }
-}
-
-const getSize = size => `${sizes.get(size)}em`
-
-const getFontStyles = (iconName: string, themeIcon?: ResultOf<FontIconSpec>): ICSSInJSStyle => {
-  const { fontFamily, content } = themeIcon || getDefaultFontIcon(iconName)
-
-  return {
-    fontFamily,
-    width: '1.18em',
-    fontStyle: 'normal',
-    fontWeight: 400,
-    textDecoration: 'inherit',
-    textAlign: 'center',
-
-    '-webkit-font-smoothing': 'antialiased',
-    '-moz-osx-font-smoothing': 'grayscale',
-    backfaceVisibility: 'hidden',
-
-    lineHeight: 1,
-
-    '::before': {
-      content,
-      boxSizing: 'inherit',
-      background: '0 0',
-    },
-  }
-}
-
-const getXSpacingStyles = (xSpacing: IconXSpacing, horizontalSpace: string): ICSSInJSStyle => {
-  switch (xSpacing) {
-    case 'none':
-      return fittedStyle
-    case 'before':
-      return { ...fittedStyle, marginLeft: horizontalSpace }
-    case 'after':
-      return { ...fittedStyle, marginRight: horizontalSpace }
-    case 'both':
-      return { ...fittedStyle, margin: `0 ${horizontalSpace}` }
-  }
-}
-
-const getBorderedStyles = (isFontBased, circular, borderColor, color): ICSSInJSStyle => {
-  return {
-    ...getPaddedStyle(isFontBased),
-
-    // TODO: "black" here should actually match the Icon's fill or text color
-    boxShadow: `0 0 0 0.05em ${borderColor || color || 'black'} inset`,
-    ...(circular ? { borderRadius: '50%' } : {}),
-  }
-}
-
-const getPaddedStyle = (isFontBased: boolean): ICSSInJSStyle => ({
-  padding: `0.5em ${isFontBased ? 0 : '0.5em'}`,
-  width: '2em',
-  height: '2em',
-})
-
-const iconStyles: IComponentPartStylesInput<IIconProps, any> = {
-  root: ({
-    props: { disabled, name, size, bordered, circular, xSpacing },
-    variables: v,
-    theme,
-  }): ICSSInJSStyle => {
-    const iconSpec = theme.icons[name]
-    const isFontBased = !iconSpec || !iconSpec.isSvg
-
-    return {
-      display: 'inline-block',
-      fontSize: getSize(size),
-
-      width: '1em',
-      height: '1em',
-
-      ...(isFontBased &&
-        getFontStyles(name, callable(iconSpec && (iconSpec.icon as FontIconSpec))())),
-
-      ...(isFontBased && { color: v.color }),
-      backgroundColor: v.backgroundColor,
-
-      opacity: 1,
-      margin: v.margin,
-
-      speak: 'none',
-
-      verticalAlign: 'middle',
-      overflow: 'hidden',
-
-      ...getXSpacingStyles(xSpacing, v.horizontalSpace),
-
-      ...((bordered || v.borderColor || circular) &&
-        getBorderedStyles(isFontBased, circular, v.borderColor, v.color)),
-
-      ...(disabled && disabledStyle),
-    }
-  },
-
-  svg: getSvgStyle('svg'),
-
-  g: getSvgStyle('g'),
-
-  /* additional SVG styles for different paths could be added/used in the same way */
-}
-
-export default iconStyles
diff --git a/src/themes/teams-high-contrast/components/Icon/iconVariables.ts b/src/themes/teams-high-contrast/components/Icon/iconVariables.ts
deleted file mode 100644
index a2c58b3d07..0000000000
--- a/src/themes/teams-high-contrast/components/Icon/iconVariables.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { pxToRem } from '../../../../lib'
-
-export interface IconVariables {
-  [key: string]: string | number | undefined
-
-  color?: string
-  backgroundColor?: string
-  borderColor?: string
-  horizontalSpace: string
-  margin: string
-}
-
-export default (): IconVariables => ({
-  color: undefined,
-  // TODO move initial variable discovery to JSON files
-  // similar to how components have an info.json file
-  backgroundColor: undefined,
-  borderColor: undefined,
-  horizontalSpace: pxToRem(10),
-  margin: '0 0.25em 0 0',
-})
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/call.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/call.tsx
deleted file mode 100644
index cd16790278..0000000000
--- a/src/themes/teams-high-contrast/components/Icon/svg/icons/call.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default {
-  icon: ({ classes }) => (
-    <svg viewBox="0 0 32 32" role="presentation" focusable="false" className={classes.svg}>
-      <g>
-        <path
-          d="M19.5,23c-0.1,0-0.3,0-0.4-0.1c-2.6-0.8-4.8-2.4-6.4-4.6l0,0c-1.6-2.2-2.3-4.9-2.1-7.6c0-0.6,0.4-1.1,0.9-1.3l0.8-0.4
-                        c0.9-0.4,1.9,0,2.3,0.8l0.3,0.7c0.5,1,0.8,2.5-0.1,3.4l-0.6,0.6c-0.2,0.2-0.2,0.5-0.1,0.7l1.9,2.8c0.1,0.2,0.4,0.3,0.6,0.2l0.7-0.3
-                        c1.3-0.5,2.6,0.3,3.3,1.1l0.5,0.5c0.6,0.7,0.6,1.8,0,2.4l-0.6,0.7C20.3,22.9,19.9,23,19.5,23z M13.5,17.8c1.4,2,3.5,3.5,5.8,4.2
-                        c0.2,0.1,0.4,0,0.5-0.1l0.6-0.7c0.3-0.3,0.3-0.8,0-1.1L20,19.6c-0.6-0.6-1.4-1.1-2.2-0.8l-0.7,0.3c-0.7,0.3-1.5,0.1-1.9-0.5
-                        l-1.9-2.8c-0.4-0.6-0.4-1.4,0.2-1.9l0.5-0.6c0.5-0.6,0.3-1.6-0.1-2.3l-0.3-0.7c-0.2-0.4-0.6-0.5-1-0.4l-0.8,0.4
-                        c-0.2,0.1-0.3,0.3-0.3,0.5C11.4,13.4,12.1,15.8,13.5,17.8L13.5,17.8z"
-        />
-        <path
-          d="M19.5,23c-0.1,0-0.3,0-0.4-0.1c-2.6-0.8-4.8-2.4-6.4-4.6l0,0c-1.6-2.2-2.3-4.9-2.1-7.6c0-0.6,0.4-1.1,0.9-1.3L12.3,9
-                        c0.9-0.4,1.9,0,2.3,0.8l0.3,0.7c0.5,1,0.8,2.5-0.1,3.4l-0.6,0.6C14,14.7,14,15,14.1,15.2L16,18c0.1,0.2,0.4,0.3,0.6,0.2l0.7-0.3
-                        c1.3-0.5,2.6,0.3,3.3,1.1l0.5,0.5c0.6,0.7,0.6,1.8,0,2.4l-0.6,0.7C20.3,22.9,19.9,23,19.5,23z"
-        />
-      </g>
-    </svg>
-  ),
-  styles: {
-    svg: ({ props, variables }) => {
-      return {
-        fill: variables.color,
-      }
-    },
-  },
-} as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/callControlPresentNew.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/callControlPresentNew.tsx
deleted file mode 100644
index 0a9e17e190..0000000000
--- a/src/themes/teams-high-contrast/components/Icon/svg/icons/callControlPresentNew.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default (
-  <svg viewBox="0 0 32 32" role="presentation">
-    <path
-      d="M22.5,9h-13C8.672852,9,8,9.672852,8,10.5v9C8,20.327148,8.672852,21,9.5,21H13c0.276367,0,0.5-0.223633,0.5-0.5
-            S13.276367,20,13,20H9.5C9.224121,20,9,19.775391,9,19.5v-9C9,10.224121,9.224121,10,9.5,10h13c0.275391,0,0.5,0.224121,0.5,0.5v9
-            c0,0.275391-0.224609,0.5-0.5,0.5H19c-0.276367,0-0.5,0.223633-0.5,0.5S18.723633,21,19,21h3.5c0.827148,0,1.5-0.672852,1.5-1.5v-9
-            C24,9.672852,23.327148,9,22.5,9z"
-    />
-    <path
-      d="M19,18c0.255859,0,0.511719-0.097656,0.707031-0.292969c0.390625-0.390625,0.390625-1.023438,0-1.414062
-            l-2.999695-2.999695c-0.092163-0.092285-0.20282-0.165344-0.325195-0.216064c-0.244507-0.101135-0.519775-0.101135-0.764282,0
-            c-0.122375,0.05072-0.233032,0.123779-0.325195,0.216064l-2.999695,2.999695c-0.390625,0.390625-0.390625,1.023438,0,1.414062
-            C12.488281,17.902344,12.744141,18,13,18s0.511719-0.097656,0.707031-0.292969L15,16.414062V22.5c0,0.552734,0.447754,1,1,1
-            s1-0.447266,1-1v-6.085938l1.292969,1.292969C18.488281,17.902344,18.744141,18,19,18z"
-    />
-  </svg>
-) as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/callControlStopPresentingNew.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/callControlStopPresentingNew.tsx
deleted file mode 100644
index e4b84b13d2..0000000000
--- a/src/themes/teams-high-contrast/components/Icon/svg/icons/callControlStopPresentingNew.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default (
-  <svg viewBox="0 0 32 32" role="presentation">
-    <path
-      d="M22.5,9h-13C8.672852,9,8,9.672852,8,10.5v9C8,20.327148,8.672852,21,9.5,21h2.006836c0.276367,0,0.5-0.223633,0.5-0.5
-                s-0.223633-0.5-0.5-0.5H9.5C9.224121,20,9,19.775391,9,19.5v-9C9,10.224121,9.224121,10,9.5,10h13c0.275391,0,0.5,0.224121,0.5,0.5
-                v9c0,0.275391-0.224609,0.5-0.5,0.5h-2.066406c-0.276367,0-0.5,0.223633-0.5,0.5s0.223633,0.5,0.5,0.5H22.5
-                c0.827148,0,1.5-0.672852,1.5-1.5v-9C24,9.672852,23.327148,9,22.5,9z"
-    />
-    <path
-      d="M19.207031,16.292969c-0.390625-0.390625-1.023438-0.390625-1.414062,0L16,18.085938l-1.792969-1.792969
-                c-0.390625-0.390625-1.023438-0.390625-1.414062,0s-0.390625,1.023438,0,1.414062L14.585938,19.5l-1.792969,1.792969
-                c-0.390625,0.390625-0.390625,1.023438,0,1.414062C12.988281,22.902344,13.244141,23,13.5,23s0.511719-0.097656,0.707031-0.292969
-                L16,20.914062l1.792969,1.792969C17.988281,22.902344,18.244141,23,18.5,23s0.511719-0.097656,0.707031-0.292969
-                c0.390625-0.390625,0.390625-1.023438,0-1.414062L17.414062,19.5l1.792969-1.792969
-                C19.597656,17.316406,19.597656,16.683594,19.207031,16.292969z"
-    />
-  </svg>
-) as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/callEnd.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/callEnd.tsx
deleted file mode 100644
index c266dba22b..0000000000
--- a/src/themes/teams-high-contrast/components/Icon/svg/icons/callEnd.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default (
-  <svg role="presentation" viewBox="0 0 32 32">
-    <path
-      d="M23.4,15.6C21.3,13.9,18.7,13,16,13s-5.3,0.9-7.4,2.6C8.1,16,7.9,16.5,8,17.1c0,0.1,0.2,0.5,0.2,0.5
-                c0.4,0.6,0.9,1.4,1.9,1.2l0.7-0.1c1.1-0.2,2.5-0.8,2.7-2.1l0.2-1.1l4.2,0l0.2,1.1c0.3,1.3,1.7,1.9,2.7,2l0.7,0.1c0.1,0,0.2,0,0.2,0
-                c0.7,0,1.1-0.5,1.5-1c0,0,0.4-0.7,0.4-0.7C24.1,16.5,23.9,16,23.4,15.6z"
-    />
-  </svg>
-) as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/callIncomingVideo.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/callIncomingVideo.tsx
deleted file mode 100644
index 38dd12913f..0000000000
--- a/src/themes/teams-high-contrast/components/Icon/svg/icons/callIncomingVideo.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default (
-  <svg viewBox="0 0 32 32" role="presentation">
-    <g>
-      <path d="M23.6968,12.0403c-0.1836-0.0786-0.3975-0.04-0.542,0.0981l-2.5317,2.4165C20.2212,14.9382,20,15.4514,20,16  c0,0.5483,0.2212,1.0615,0.623,1.4448l2.5317,2.4167C23.2495,19.9521,23.374,20,23.5,20c0.0664,0,0.1333-0.0132,0.1968-0.0403  C23.8809,19.8809,24,19.7002,24,19.5v-7C24,12.2998,23.8809,12.1191,23.6968,12.0403z M23,18.3315l-1.6865-1.6099v-0.0002  C21.1113,16.5286,21,16.2725,21,16s0.1113-0.5286,0.3135-0.7217L23,13.6685V18.3315z" />
-      <path d="M17.5,11H9.8193c-0.7056,0-1.3232,0.5393-1.4692,1.2822C8.1177,13.4619,8,14.7129,8,16s0.1177,2.5381,0.3501,3.7173  C8.4961,20.4607,9.1138,21,9.8193,21H17.5c0.8271,0,1.5-0.6729,1.5-1.5v-7C19,11.6729,18.3271,11,17.5,11z M18,19.5  c0,0.2756-0.2241,0.5-0.5,0.5H9.8193c-0.2285,0-0.4341-0.2-0.4878-0.4756C9.1113,18.4082,9,17.2224,9,16  s0.1113-2.4082,0.3315-3.5249C9.3853,12.2,9.5908,12,9.8193,12H17.5c0.2759,0,0.5,0.2244,0.5,0.5V19.5z" />
-      <path d="M23.6968,12.0403c-0.1841-0.0786-0.3975-0.04-0.542,0.0981l-2.5317,2.4165C20.2212,14.9382,20,15.4514,20,16  c0,0.5483,0.2212,1.0615,0.623,1.4448l2.5317,2.4167C23.2495,19.9521,23.374,20,23.5,20c0.0664,0,0.1333-0.0132,0.1968-0.0403  C23.8809,19.8809,24,19.7002,24,19.5v-7C24,12.2998,23.8809,12.1191,23.6968,12.0403z" />
-      <path d="M17.5,11H9.8193c-0.7056,0-1.3232,0.5393-1.4692,1.2822C8.1177,13.4619,8,14.7129,8,16s0.1177,2.5381,0.3501,3.7173  C8.4961,20.4607,9.1138,21,9.8193,21H17.5c0.8271,0,1.5-0.6729,1.5-1.5v-7C19,11.6729,18.3271,11,17.5,11z" />
-    </g>
-  </svg>
-) as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/callIncomingVideoOff.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/callIncomingVideoOff.tsx
deleted file mode 100644
index 59e9cbf9ae..0000000000
--- a/src/themes/teams-high-contrast/components/Icon/svg/icons/callIncomingVideoOff.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default (
-  <svg role="presentation" viewBox="-4 -4 40 40">
-    <path
-      d="M26,6.5859c0,0.1694-0.0615,0.3159-0.1855,0.4395L19.75,13.0996v7.2363c0,0.2539-0.0508,0.4941-0.1514,0.7227
-              s-0.2363,0.4258-0.4053,0.5957s-0.3682,0.3047-0.5957,0.4053s-0.4688,0.1514-0.7227,0.1514h-7.2363l-3.5742,3.5645
-              c-0.124,0.123-0.2705,0.1855-0.4395,0.1855s-0.3154-0.0625-0.4395-0.1855S6,25.5059,6,25.3359s0.0615-0.3164,0.1855-0.4395
-              l18.75-18.75c0.124-0.1235,0.2705-0.1855,0.4395-0.1855s0.3154,0.062,0.4395,0.1855S26,6.4165,26,6.5859z M19.0469,10.1406
-              l-0.8984,0.8887c-0.0908-0.0454-0.1826-0.0684-0.2734-0.0684H8.2754c-0.1885,0-0.3438,0.1074-0.4639,0.3223
-              s-0.2197,0.4917-0.2979,0.8301s-0.1348,0.7129-0.1709,1.123s-0.0605,0.8105-0.0732,1.2012S7.25,15.186,7.25,15.5117
-              s0,0.5664,0,0.7227c0,0.1304,0.002,0.3335,0.0049,0.6104c0.0029,0.2764,0.0127,0.5869,0.0293,0.9326s0.042,0.6992,0.0781,1.0645
-              s0.0908,0.7012,0.166,1.0107s0.1689,0.5654,0.2832,0.7666s0.2559,0.3125,0.4248,0.332l-0.9473,0.9473
-              c-0.2217-0.1504-0.4072-0.3662-0.5566-0.6494s-0.2715-0.6045-0.3662-0.9619s-0.168-0.7373-0.2197-1.1377
-              s-0.0879-0.7959-0.1074-1.1865s-0.0312-0.7598-0.0342-1.1084C6.002,16.5063,6,16.2085,6,15.9609
-              c0-0.3843,0.0029-0.7729,0.0098-1.167s0.0244-0.7861,0.0537-1.1768s0.0732-0.7798,0.1318-1.167s0.1396-0.7666,0.2441-1.1377
-              c0.0586-0.2212,0.1416-0.4297,0.249-0.625s0.2373-0.3647,0.3906-0.5078s0.3291-0.2573,0.5273-0.3418s0.4219-0.127,0.6689-0.127
-              h9.5996c0.2148,0,0.4229,0.0376,0.625,0.1123S18.8838,10.0039,19.0469,10.1406z M18.5,20.3359v-5.9863l-6.6113,6.6113h5.9863
-              c0.1689,0,0.3154-0.0625,0.4395-0.1855S18.5,20.5059,18.5,20.3359z M26,20.3359c0,0.1699-0.0615,0.3164-0.1855,0.4395
-              s-0.2705,0.1855-0.4395,0.1855s-0.3125-0.0586-0.4297-0.1758l-3.1641-3.0176c-0.2471-0.2344-0.4395-0.5098-0.5762-0.8252
-              C21.0684,16.6265,21,16.2993,21,15.9609s0.0684-0.6655,0.2051-0.9814s0.3291-0.5908,0.5762-0.8252l3.1641-3.0176
-              c0.1172-0.1172,0.2607-0.1758,0.4297-0.1758s0.3154,0.062,0.4395,0.1855S26,11.4165,26,11.5859V20.3359z M24.75,18.8711v-5.8203
-              l-2.1094,2.0117c-0.124,0.1108-0.2197,0.2456-0.2881,0.4053S22.25,15.7915,22.25,15.9609s0.0342,0.3335,0.1025,0.4932
-              s0.1641,0.2944,0.2881,0.4053L24.75,18.8711z"
-    />
-  </svg>
-) as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/callMicrophone.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/callMicrophone.tsx
deleted file mode 100644
index 0647f2f9ef..0000000000
--- a/src/themes/teams-high-contrast/components/Icon/svg/icons/callMicrophone.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default (
-  <svg role="presentation" viewBox="0 0 40 40">
-    <path
-      d="M27.5,20.0002441c0,1.2558594-0.3085938,2.4482422-0.9277344,3.5742188
-            c-0.2988281,0.5341797-0.65625,1.0253906-1.0742188,1.4746094c-0.4160156,0.4492188-0.8789062,0.8466797-1.3867188,1.1914062
-            c-0.5136719,0.3447266-1.0664062,0.6230469-1.6552734,0.8349609s-1.1992188,0.34375-1.8310547,0.3955078v1.9042969
-            c0,0.1689453-0.0615234,0.3154297-0.1855469,0.4394531C20.3164062,29.9387207,20.1699219,30.0002441,20,30.0002441
-            c-0.1694336,0-0.315918-0.0615234-0.4394531-0.1855469S19.375,29.5441895,19.375,29.3752441v-1.9042969
-            c-0.6313477-0.0517578-1.2416992-0.1835938-1.8310547-0.3955078s-1.1411133-0.4902344-1.6552734-0.8349609
-            c-0.5078125-0.3447266-0.9702148-0.7441406-1.3867188-1.1962891s-0.7714844-0.9423828-1.0644531-1.4697266
-            c-0.2993164-0.5400391-0.5307617-1.1132812-0.6933594-1.71875S12.5,20.6311035,12.5,20.0002441
-            c0-0.1699219,0.0620117-0.3164062,0.1855469-0.4399414s0.2700195-0.1855469,0.4394531-0.1855469
-            s0.315918,0.0620117,0.4394531,0.1855469S13.75,19.8303223,13.75,20.0002441c0,1.1191406,0.2866211,2.1650391,0.859375,3.1347656
-            c0.2734375,0.4619141,0.6020508,0.8857422,0.9863281,1.2695312s0.8071289,0.7128906,1.2695312,0.9863281
-            c0.9702148,0.5732422,2.0151367,0.859375,3.1347656,0.859375c1.1201172,0,2.1650391-0.2861328,3.1347656-0.859375
-            c0.4628906-0.2734375,0.8867188-0.6025391,1.2695312-0.9863281c0.3847656-0.3837891,0.7128906-0.8076172,0.9863281-1.2695312
-            C25.9648438,22.1652832,26.25,21.1193848,26.25,20.0002441c0-0.1699219,0.0625-0.3164062,0.1855469-0.4399414
-            c0.125-0.1235352,0.2714844-0.1855469,0.4394531-0.1855469c0.1699219,0,0.3164062,0.0620117,0.4394531,0.1855469
-            C27.4394531,19.6838379,27.5,19.8303223,27.5,20.0002441z M23.75,13.7497559v6.2504883
-            c0,0.5009766-0.0976562,0.9794922-0.2929688,1.4355469c-0.1953125,0.4550781-0.4648438,0.8564453-0.8105469,1.2011719
-            c-0.3515625,0.3515625-0.7548828,0.625-1.2109375,0.8203125C20.9804688,23.6525879,20.5019531,23.7502441,20,23.7502441
-            c-0.5014648,0-0.9780273-0.0976562-1.4306641-0.2929688s-0.8544922-0.46875-1.2060547-0.8203125
-            s-0.625-0.7539062-0.8203125-1.2060547C16.3476562,20.9777832,16.25,20.5012207,16.25,20.0002441v-6.2504883
-            c0-0.5014648,0.0976562-0.9799805,0.2929688-1.4355469s0.46875-0.859375,0.8203125-1.2109375
-            c0.3452148-0.3452148,0.7456055-0.6152344,1.2011719-0.8105469S19.4985352,9.9997559,20,9.9997559
-            c0.5019531,0,0.9814453,0.0976562,1.4404297,0.2929688s0.8613281,0.465332,1.2060547,0.8105469
-            c0.3457031,0.3452148,0.6152344,0.7470703,0.8105469,1.2060547S23.75,13.248291,23.75,13.7497559z M22.5,20.0002441v-6.2504883
-            c0-0.3320312-0.0644531-0.6494141-0.1953125-0.9521484c-0.1298828-0.3027344-0.3125-0.5712891-0.546875-0.8056641
-            s-0.5029297-0.4165039-0.8056641-0.546875S20.3320312,11.2497559,20,11.2497559s-0.6494141,0.0649414-0.9521484,0.1953125
-            s-0.5712891,0.3125-0.8056641,0.546875s-0.4165039,0.5029297-0.546875,0.8056641S17.5,13.4177246,17.5,13.7497559v6.2504883
-            c0,0.3320312,0.0649414,0.6494141,0.1953125,0.9521484s0.3125,0.5712891,0.546875,0.8056641s0.5029297,0.4169922,0.8056641,0.546875
-            S19.6679688,22.5002441,20,22.5002441s0.6494141-0.0654297,0.9521484-0.1953125s0.5712891-0.3125,0.8056641-0.546875
-            s0.4169922-0.5029297,0.546875-0.8056641C22.4355469,20.6496582,22.5,20.3322754,22.5,20.0002441z"
-    />
-  </svg>
-) as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/callMicrophoneOff.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/callMicrophoneOff.tsx
deleted file mode 100644
index 9bffeb36a1..0000000000
--- a/src/themes/teams-high-contrast/components/Icon/svg/icons/callMicrophoneOff.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default (
-  <svg role="presentation" viewBox="-4 -4 40 40">
-    <path
-      d="M26,6.625c0,0.1694-0.0615,0.3159-0.1855,0.4395L19.75,13.1387V16c0,0.5078-0.0996,0.9897-0.2979,1.4453
-                c-0.1982,0.4551-0.4688,0.8545-0.8105,1.1963s-0.7402,0.6123-1.1963,0.8105S16.5078,19.75,16,19.75
-                c-0.3906,0-0.7715-0.0605-1.1426-0.1807s-0.7129-0.2939-1.0254-0.5225l-1.7773,1.7871c0.5537,0.4492,1.1699,0.7969,1.8506,1.0449
-                S15.2842,22.25,16,22.25c0.5664,0,1.1152-0.0742,1.6455-0.2246s1.0273-0.3613,1.4893-0.6348s0.8857-0.6016,1.2695-0.9863
-                s0.7129-0.8066,0.9863-1.2695s0.4854-0.959,0.6348-1.4893S22.25,16.5664,22.25,16c0-0.1694,0.0615-0.3159,0.1855-0.4395
-                s0.2705-0.1855,0.4395-0.1855s0.3154,0.062,0.4395,0.1855S23.5,15.8306,23.5,16c0,0.6445-0.0811,1.2676-0.2441,1.8701
-                s-0.3926,1.1719-0.6885,1.709s-0.6523,1.0322-1.0693,1.4844s-0.8789,0.8486-1.3867,1.1865s-1.0566,0.6133-1.6455,0.8252
-                s-1.2031,0.3428-1.8408,0.3955v1.9043c0,0.1699-0.0615,0.3164-0.1855,0.4395S16.1689,26,16,26s-0.3154-0.0625-0.4395-0.1855
-                s-0.1855-0.2695-0.1855-0.4395v-1.9141c-0.7744-0.0645-1.5215-0.248-2.2412-0.5469s-1.375-0.6992-1.9678-1.2012l-4.1016,4.1016
-                C6.9404,25.9375,6.7939,26,6.625,26s-0.3154-0.0625-0.4395-0.1855S6,25.5449,6,25.375s0.0615-0.3164,0.1855-0.4395l18.75-18.75
-                C25.0596,6.062,25.2061,6,25.375,6s0.3154,0.062,0.4395,0.1855S26,6.4556,26,6.625z M10.4336,18.8125l-0.9277,0.918
-                c-0.3252-0.5664-0.5742-1.166-0.7471-1.7969S8.5,16.6577,8.5,16c0-0.1694,0.0615-0.3159,0.1855-0.4395S8.9561,15.375,9.125,15.375
-                s0.3154,0.062,0.4395,0.1855S9.75,15.8306,9.75,16c0,0.4883,0.0566,0.9702,0.1709,1.4453
-                C10.0352,17.9199,10.2061,18.377,10.4336,18.8125z M19.7305,9.5059L18.5,10.7363V9.75c0-0.3384-0.0664-0.6592-0.2002-0.9619
-                s-0.3145-0.5679-0.542-0.7959s-0.4932-0.4087-0.7959-0.542S16.3389,7.25,16,7.25s-0.6592,0.0669-0.9619,0.2002
-                s-0.5684,0.314-0.7959,0.542s-0.4082,0.4932-0.542,0.7959S13.5,9.4116,13.5,9.75v5.9863l-1.1328,1.1426
-                C12.2891,16.5991,12.25,16.3062,12.25,16V9.75c0-0.5078,0.0996-0.9897,0.2979-1.4453s0.4688-0.8545,0.8105-1.1963
-                s0.7402-0.6118,1.1963-0.8105S15.4922,6,16,6c0.4883,0,0.9502,0.0913,1.3867,0.2734s0.8232,0.4331,1.1621,0.752
-                s0.6123,0.6899,0.8203,1.1133S19.6982,9.0176,19.7305,9.5059z M18.5,16v-1.6113l-3.7695,3.7598
-                c0.1885,0.1113,0.3926,0.1973,0.6104,0.2588S15.7783,18.5,16,18.5c0.3389,0,0.6592-0.0664,0.9619-0.2002
-                s0.5684-0.3135,0.7959-0.542s0.4082-0.4932,0.542-0.7959S18.5,16.3384,18.5,16z"
-    />
-  </svg>
-) as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/index.ts b/src/themes/teams-high-contrast/components/Icon/svg/icons/index.ts
deleted file mode 100644
index 3298f956ec..0000000000
--- a/src/themes/teams-high-contrast/components/Icon/svg/icons/index.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import { TeamsSvgIconSpec } from '../types'
-
-import call from './call'
-import callEnd from './callEnd'
-import callVideo from './callIncomingVideo'
-import callVideoOff from './callIncomingVideoOff'
-import callStartPresenting from './callControlPresentNew'
-import callStopPresenting from './callControlStopPresentingNew'
-import callMicrophone from './callMicrophone'
-import callMicrophoneOff from './callMicrophoneOff'
-import more from './more'
-import teamCreate from './teamCreate'
-import umbrella from './umbrella'
-
-export default {
-  call,
-  'call-end': callEnd,
-  'call-video': callVideo,
-  'call-video-off': callVideoOff,
-  'call-start-presenting': callStartPresenting,
-  'call-stop-presenting': callStopPresenting,
-  'call-microphone': callMicrophone,
-  'call-microphone-off': callMicrophoneOff,
-  more,
-  'team-create': teamCreate,
-  umbrella,
-} as { [iconName: string]: TeamsSvgIconSpec }
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/more.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/more.tsx
deleted file mode 100644
index 1b53b7481d..0000000000
--- a/src/themes/teams-high-contrast/components/Icon/svg/icons/more.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default (
-  <svg viewBox="0 0 32 32" role="presentation" focusable="false">
-    <g>
-      <circle cx="22" cy="16" r="2" />
-      <circle cx="16" cy="16" r="2" />
-      <circle cx="10" cy="16" r="2" />
-
-      <circle cx="22" cy="16" r="1.5" />
-      <circle cx="16" cy="16" r="1.5" />
-      <circle cx="10" cy="16" r="1.5" />
-    </g>
-  </svg>
-) as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/teamCreate.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/teamCreate.tsx
deleted file mode 100644
index e96ff59678..0000000000
--- a/src/themes/teams-high-contrast/components/Icon/svg/icons/teamCreate.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default (
-  <svg viewBox="0 0 32 32" role="presentation" focusable="false">
-    <g>
-      <path
-        d="M10,11c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S11.1,11,10,11z M10,14c-0.6,0-1-0.4-1-1s0.4-1,1-1s1,0.4,1,1S10.6,14,10,14zM16,14c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S14.9,14,16,14z M16,11c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S15.4,11,16,11zM13,20c0,1.3,1.2,2,3,2c1.9,0,3-0.7,3-2v-5h-6V20z M14,16h4v4c0,1-1.7,1.1-2,1.1S14,21,14,20V16zM11.5,17c0.3,0,0.5-0.2,0.5-0.5c0-0.3-0.2-0.5-0.5-0.5H8v3c0,1.3,1.1,2,3,2h0.5c0.3,0,0.5-0.2,0.5-0.5
-                c0-0.3-0.2-0.5-0.5-0.5H11C10.7,20,9,20,9,19v-2H11.5zM23.5,10H22V8.5C22,8.2,21.8,8,21.5,8S21,8.2,21,8.5V10h-1.5c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5H21v1.5
-                c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V11h1.5c0.3,0,0.5-0.2,0.5-0.5S23.8,10,23.5,10z"
-      />
-      <path
-        d="M10,11c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2S11.1,11,10,11z
-                M16,14c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S14.9,14,16,14z
-                M11.5,16H8v3c0,1.3,1.1,2,3,2h0.5c0.3,0,0.5-0.2,0.5-0.5v-4C12,16.2,11.8,16,11.5,16z
-                M13,20c0,1.3,1.2,2,3,2c1.9,0,3-0.7,3-2v-5h-6V20z
-                M23.5,10H22V8.5C22,8.2,21.8,8,21.5,8S21,8.2,21,8.5V10h-1.5c-0.3,0-0.5,0.2-0.5,0.5s0.2,0.5,0.5,0.5H21v1.5
-                c0,0.3,0.2,0.5,0.5,0.5s0.5-0.2,0.5-0.5V11h1.5c0.3,0,0.5-0.2,0.5-0.5S23.8,10,23.5,10z"
-      />
-    </g>
-  </svg>
-) as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/icons/umbrella.tsx b/src/themes/teams-high-contrast/components/Icon/svg/icons/umbrella.tsx
deleted file mode 100644
index 1f3801584d..0000000000
--- a/src/themes/teams-high-contrast/components/Icon/svg/icons/umbrella.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import * as React from 'react'
-import { TeamsSvgIconSpec } from '../types'
-
-export default {
-  icon: ({ classes }) => (
-    <svg className={classes.svg} viewBox="0 0 34 34">
-      <path d="M27 14h5c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0zM27 14c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2v0 14c0 1.112-0.895 2-2 2-1.112 0-2-0.896-2-2.001v-1.494c0-0.291 0.224-0.505 0.5-0.505 0.268 0 0.5 0.226 0.5 0.505v1.505c0 0.547 0.444 0.991 1 0.991 0.552 0 1-0.451 1-0.991v-14.009c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-1.105-1.119-2-2.5-2s-2.5 0.895-2.5 2c0-5.415 6.671-9.825 15-9.995v-1.506c0-0.283 0.224-0.499 0.5-0.499 0.268 0 0.5 0.224 0.5 0.499v1.506c8.329 0.17 15 4.58 15 9.995h-5z" />
-    </svg>
-  ),
-  styles: {
-    svg: ({ variables: v }) => ({
-      fill: v.color,
-    }),
-  },
-} as TeamsSvgIconSpec
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/index.ts b/src/themes/teams-high-contrast/components/Icon/svg/index.ts
deleted file mode 100644
index 30bc887b4b..0000000000
--- a/src/themes/teams-high-contrast/components/Icon/svg/index.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import svgIconsAndStyles from './icons'
-import { SvgIconSpecWithStyles, TeamsSvgIconSpec } from './types'
-
-export const getStyle = partName => {
-  return args => {
-    const { props } = args
-
-    const maybeIconSpec = svgIconsAndStyles[props.name]
-    const maybeIconStyles = maybeIconSpec && (maybeIconSpec as SvgIconSpecWithStyles).styles
-
-    if (maybeIconStyles && maybeIconStyles[partName]) {
-      return maybeIconStyles[partName](args)
-    }
-
-    return undefined
-  }
-}
-
-export default svgIconsAndStyles as { [iconName: string]: TeamsSvgIconSpec }
diff --git a/src/themes/teams-high-contrast/components/Icon/svg/types.d.ts b/src/themes/teams-high-contrast/components/Icon/svg/types.d.ts
deleted file mode 100644
index 6f2c2415c6..0000000000
--- a/src/themes/teams-high-contrast/components/Icon/svg/types.d.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { ComponentPartStyleFunction, SvgIconSpec } from '../../../../../../types/theme'
-import { ObjectOf } from '../../../../../../types/utils'
-import { IIconProps } from '../../../../../components/Icon/Icon'
-
-type SvgIconSpecWithStyles = {
-  icon: SvgIconSpec
-  styles: ObjectOf<ComponentPartStyleFunction<IIconProps, any>>
-}
-
-export type TeamsSvgIconSpec = SvgIconSpec | SvgIconSpecWithStyles
diff --git a/src/themes/teams-high-contrast/index.ts b/src/themes/teams-high-contrast/index.ts
index 47cecb488a..e0bb204ebf 100644
--- a/src/themes/teams-high-contrast/index.ts
+++ b/src/themes/teams-high-contrast/index.ts
@@ -1,46 +1,10 @@
-import {
-  FontIconSpec,
-  IThemeInput,
-  SvgIconSpec,
-  ThemeIcons,
-  ThemeIconSpec,
-} from '../../../types/theme'
-
 import * as siteVariables from './siteVariables'
 import * as componentVariables from './componentVariables'
 import * as componentStyles from './componentStyles'
-
-import { default as svgIconsAndStyles } from './components/Icon/svg'
-import { default as fontIcons } from './components/Icon/font'
-
-import { SvgIconSpecWithStyles, TeamsSvgIconSpec } from './components/Icon/svg/types'
-
-const declareSvg = (svgIcon: SvgIconSpec): ThemeIconSpec => ({
-  isSvg: true,
-  icon: svgIcon,
-})
-
-const declareFontBased = (fontIcon: FontIconSpec): ThemeIconSpec => ({ icon: fontIcon })
-
-const icons: ThemeIcons = Object.keys(svgIconsAndStyles as {
-  [iconName: string]: TeamsSvgIconSpec
-}).reduce<ThemeIcons>((accIcons, iconName) => {
-  const iconAndMaybeStyles = svgIconsAndStyles[iconName]
-
-  const icon: SvgIconSpec = (iconAndMaybeStyles as any).styles
-    ? (iconAndMaybeStyles as SvgIconSpecWithStyles).icon
-    : (iconAndMaybeStyles as SvgIconSpec)
-
-  return { ...accIcons, ...{ [iconName]: declareSvg(icon) } }
-}, {})
-
-Object.keys(fontIcons).forEach(iconName => {
-  icons[iconName] = declareFontBased(fontIcons[iconName])
-})
+import { IThemeInput } from '../../../types/theme'
 
 export default {
   siteVariables,
   componentVariables,
   componentStyles,
-  icons,
 } as IThemeInput

From be911d75a5dce457aca5a5e786b92808306ac6a5 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 26 Sep 2018 16:28:39 +0200
Subject: [PATCH 07/23] -improved styles for the theme picker dropdown

---
 docs/src/Style.ts | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/docs/src/Style.ts b/docs/src/Style.ts
index 1008bf1016..3d62f84cf4 100644
--- a/docs/src/Style.ts
+++ b/docs/src/Style.ts
@@ -37,4 +37,20 @@ export const semanticCssOverrides = `
     color: rgba(255,255,255,.7)!important;
     cursor: not-allowed!important;
   }
+
+   .ui.dropdown, .ui.dropdown.active.visible {
+    background-color: rgba(255, 255, 255, 0.15)!important;
+    color: #bebebe!important;
+  }
+  .ui.menu .ui.dropdown .menu>.item  {
+    background-color: black!important;
+    color: white!important;
+  }
+  ui.menu .ui.dropdown .menu>.item :hover {
+    background-color: rgba(255, 255, 255, 0.15)!important;
+  }
+  .ui.menu .ui.dropdown .menu>.active.item {
+    background-color: black!important;
+    color: white!important;
+  }
 `

From 4dcbc3020a86decf451e5a32b4d281221f2edbf0 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 26 Sep 2018 16:46:06 +0200
Subject: [PATCH 08/23] -tslint fixes

---
 src/themes/teams-dark/components/Button/buttonVariables.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/themes/teams-dark/components/Button/buttonVariables.ts b/src/themes/teams-dark/components/Button/buttonVariables.ts
index 9455106be9..e5ab4067ef 100644
--- a/src/themes/teams-dark/components/Button/buttonVariables.ts
+++ b/src/themes/teams-dark/components/Button/buttonVariables.ts
@@ -1,5 +1,3 @@
-import { pxToRem } from '../../../../lib'
-
 export interface IButtonVariables {
   [key: string]: string | number
 

From e18b8fc8fd7b71e3c26d77af9939d13948de5bec Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 27 Sep 2018 16:15:13 +0200
Subject: [PATCH 09/23] -moves the merging of the themes from the Provider ot
 the exporting files of the themes

---
 docs/src/routes.tsx                     | 2 +-
 src/themes/index.ts                     | 2 ++
 src/themes/teams-dark/index.ts          | 7 ++++++-
 src/themes/teams-high-contrast/index.ts | 7 ++++++-
 4 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/docs/src/routes.tsx b/docs/src/routes.tsx
index e25d8bd9bf..95053921ee 100644
--- a/docs/src/routes.tsx
+++ b/docs/src/routes.tsx
@@ -32,7 +32,7 @@ class Router extends React.Component<any, any> {
     const theme = themes[themeStore.themeName]
     return (
       <Provider
-        theme={mergeThemes(semanticStyleOverrides, themes.teams, theme, {
+        theme={mergeThemes(semanticStyleOverrides, theme, {
           // adjust Teams' theme to Semantic UI's font size scheme
           siteVariables: {
             htmlFontSize: '14px',
diff --git a/src/themes/index.ts b/src/themes/index.ts
index 4dfa3d06e2..dd12fab201 100644
--- a/src/themes/index.ts
+++ b/src/themes/index.ts
@@ -1,4 +1,6 @@
 // Themes
 export { default as teams } from './teams'
 export { default as teamsDark } from './teams-dark'
+export { teamsLightPlusTeamsDark } from './teams-dark'
 export { default as teamsHighContrast } from './teams-high-contrast'
+export { teamsLightPlusTeamsHighContrast } from './teams-high-contrast'
diff --git a/src/themes/teams-dark/index.ts b/src/themes/teams-dark/index.ts
index c544794cce..c328a00acb 100644
--- a/src/themes/teams-dark/index.ts
+++ b/src/themes/teams-dark/index.ts
@@ -3,9 +3,14 @@ import { IThemeInput } from '../../../types/theme'
 import * as siteVariables from './siteVariables'
 import * as componentVariables from './componentVariables'
 import * as componentStyles from './componentStyles'
+import { default as teams } from '../teams'
+import mergeThemes from '../../lib/mergeThemes'
 
-export default {
+const teamsDark = {
   siteVariables,
   componentVariables,
   componentStyles,
 } as IThemeInput
+
+export default teamsDark
+export const teamsLightPlusTeamsDark = mergeThemes(teams, teamsDark)
diff --git a/src/themes/teams-high-contrast/index.ts b/src/themes/teams-high-contrast/index.ts
index e0bb204ebf..9493511d87 100644
--- a/src/themes/teams-high-contrast/index.ts
+++ b/src/themes/teams-high-contrast/index.ts
@@ -2,9 +2,14 @@ import * as siteVariables from './siteVariables'
 import * as componentVariables from './componentVariables'
 import * as componentStyles from './componentStyles'
 import { IThemeInput } from '../../../types/theme'
+import mergeThemes from '../../lib/mergeThemes'
+import { default as teams } from '../teams'
 
-export default {
+const teamsHighContrast = {
   siteVariables,
   componentVariables,
   componentStyles,
 } as IThemeInput
+
+export default teamsHighContrast
+export const teamsLightPlusTeamsHighContrast = mergeThemes(teams, teamsHighContrast)

From cf9c277076f155de618aed7e1e6b8a1e240e78e7 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 27 Sep 2018 17:18:20 +0200
Subject: [PATCH 10/23] -exported just the merged themes

---
 src/themes/index.ts                     | 2 --
 src/themes/teams-dark/index.ts          | 5 ++---
 src/themes/teams-high-contrast/index.ts | 5 ++---
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/themes/index.ts b/src/themes/index.ts
index dd12fab201..4dfa3d06e2 100644
--- a/src/themes/index.ts
+++ b/src/themes/index.ts
@@ -1,6 +1,4 @@
 // Themes
 export { default as teams } from './teams'
 export { default as teamsDark } from './teams-dark'
-export { teamsLightPlusTeamsDark } from './teams-dark'
 export { default as teamsHighContrast } from './teams-high-contrast'
-export { teamsLightPlusTeamsHighContrast } from './teams-high-contrast'
diff --git a/src/themes/teams-dark/index.ts b/src/themes/teams-dark/index.ts
index c328a00acb..34ca340923 100644
--- a/src/themes/teams-dark/index.ts
+++ b/src/themes/teams-dark/index.ts
@@ -6,11 +6,10 @@ import * as componentStyles from './componentStyles'
 import { default as teams } from '../teams'
 import mergeThemes from '../../lib/mergeThemes'
 
-const teamsDark = {
+const teamsDarkOnly = {
   siteVariables,
   componentVariables,
   componentStyles,
 } as IThemeInput
 
-export default teamsDark
-export const teamsLightPlusTeamsDark = mergeThemes(teams, teamsDark)
+export default mergeThemes(teams, teamsDarkOnly)
diff --git a/src/themes/teams-high-contrast/index.ts b/src/themes/teams-high-contrast/index.ts
index 9493511d87..b48e6af0e7 100644
--- a/src/themes/teams-high-contrast/index.ts
+++ b/src/themes/teams-high-contrast/index.ts
@@ -5,11 +5,10 @@ import { IThemeInput } from '../../../types/theme'
 import mergeThemes from '../../lib/mergeThemes'
 import { default as teams } from '../teams'
 
-const teamsHighContrast = {
+const teamsHighContrastOnly = {
   siteVariables,
   componentVariables,
   componentStyles,
 } as IThemeInput
 
-export default teamsHighContrast
-export const teamsLightPlusTeamsHighContrast = mergeThemes(teams, teamsHighContrast)
+export default mergeThemes(teams, teamsHighContrastOnly)

From cfd9daccdcee9cdcbad43ca667521d0e5f56bf8d Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Thu, 27 Sep 2018 17:19:04 +0200
Subject: [PATCH 11/23] -exported standalone themes (dark and HC)

---
 src/themes/teams-dark/index.ts          | 2 +-
 src/themes/teams-high-contrast/index.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/themes/teams-dark/index.ts b/src/themes/teams-dark/index.ts
index 34ca340923..099a37d604 100644
--- a/src/themes/teams-dark/index.ts
+++ b/src/themes/teams-dark/index.ts
@@ -6,7 +6,7 @@ import * as componentStyles from './componentStyles'
 import { default as teams } from '../teams'
 import mergeThemes from '../../lib/mergeThemes'
 
-const teamsDarkOnly = {
+export const teamsDarkOnly = {
   siteVariables,
   componentVariables,
   componentStyles,
diff --git a/src/themes/teams-high-contrast/index.ts b/src/themes/teams-high-contrast/index.ts
index b48e6af0e7..5c2472f5be 100644
--- a/src/themes/teams-high-contrast/index.ts
+++ b/src/themes/teams-high-contrast/index.ts
@@ -5,7 +5,7 @@ import { IThemeInput } from '../../../types/theme'
 import mergeThemes from '../../lib/mergeThemes'
 import { default as teams } from '../teams'
 
-const teamsHighContrastOnly = {
+export const teamsHighContrastOnly = {
   siteVariables,
   componentVariables,
   componentStyles,

From a62497e19360eeea43d200d1d7759296ee915eb3 Mon Sep 17 00:00:00 2001
From: Levi Thomason <me@levithomason.com>
Date: Thu, 27 Sep 2018 13:22:20 -0700
Subject: [PATCH 12/23] cleanup sidebar

---
 docs/src/components/Sidebar/Sidebar.tsx | 32 ++++++++++++-------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx
index 6d5af4becc..7b624f0f2e 100644
--- a/docs/src/components/Sidebar/Sidebar.tsx
+++ b/docs/src/components/Sidebar/Sidebar.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { findDOMNode } from 'react-dom'
 import { NavLink } from 'react-router-dom'
 import { withRouter } from 'react-router'
-import { Dropdown, Form, Icon, Input as SemanticUIInput, Menu } from 'semantic-ui-react'
+import { Icon, Input as SemanticUIInput, Menu } from 'semantic-ui-react'
 import { inject, observer } from 'mobx-react'
 
 import Logo from 'docs/src/components/Logo/Logo'
@@ -19,7 +19,6 @@ const behaviorMenu = require('docs/src/behaviorMenu')
 
 const selectedItemLabelStyle: any = { color: '#35bdb2', float: 'right' }
 const selectedItemLabel = <span style={selectedItemLabelStyle}>Press Enter</span>
-const dropDownStyle: any = { borderRadius: '0px' }
 type ComponentMenuItem = { displayName: string; type: string }
 
 @inject((appState: AppStateStore) => ({
@@ -172,9 +171,9 @@ class Sidebar extends React.Component<any, any> {
     return <Menu.Menu>{menuItems}</Menu.Menu>
   }
 
-  private handleThemeChange = (event: React.SyntheticEvent, data: any) => {
+  private handleThemeChange = (event: any) => {
     const { themeStore } = this.props
-    const themeName = data.value
+    const themeName = event.target.value
     themeStore.changeTheme(themeName)
   }
 
@@ -208,18 +207,19 @@ class Sidebar extends React.Component<any, any> {
             </Menu.Item>
           </Menu.Menu>
         </Menu.Item>
-        <Menu.Item style={{ padding: '0px' }}>
-          <Form inverted widths="equal">
-            <Dropdown
-              placeholder="Select theme..."
-              fluid
-              selection
-              defaultValue={themeName}
-              options={this.getThemeOptions()}
-              onChange={this.handleThemeChange}
-              style={dropDownStyle}
-            />
-          </Form>
+        <Menu.Item>
+          <p>Theme:</p>
+          <select
+            placeholder="Select theme..."
+            defaultValue={themeName}
+            onChange={this.handleThemeChange}
+          >
+            {this.getThemeOptions().map(o => (
+              <option key={o.value} value={o.value}>
+                {o.text}
+              </option>
+            ))}
+          </select>
         </Menu.Item>
         <Menu.Item as={NavLink} exact to="/" activeClassName="active">
           Introduction

From a032a55d2ad08518acdeaff2e131947879536c12 Mon Sep 17 00:00:00 2001
From: Levi Thomason <me@levithomason.com>
Date: Sat, 29 Sep 2018 08:20:35 -0700
Subject: [PATCH 13/23] cleanup dark/contrast theme values

---
 src/themes/teams-dark/componentStyles.ts      |   1 -
 .../components/Button/buttonStyles.ts         | 164 ------------------
 src/themes/teams-dark/index.ts                |  15 +-
 src/themes/teams-dark/siteVariables.ts        | 109 +++---------
 .../teams-high-contrast/componentStyles.ts    |   1 -
 .../teams-high-contrast/componentVariables.ts |   1 -
 .../components/Button/buttonStyles.ts         |  72 --------
 .../components/Button/buttonVariables.ts      |  27 ---
 src/themes/teams-high-contrast/index.ts       |  15 +-
 .../teams-high-contrast/siteVariables.ts      |  91 +---------
 .../teams/components/Input/inputVariables.ts  |   2 +-
 src/themes/teams/siteVariables.ts             |   1 -
 src/themes/teams/staticStyles/globalStyles.ts |   4 +-
 13 files changed, 33 insertions(+), 470 deletions(-)
 delete mode 100644 src/themes/teams-dark/componentStyles.ts
 delete mode 100644 src/themes/teams-dark/components/Button/buttonStyles.ts
 delete mode 100644 src/themes/teams-high-contrast/componentStyles.ts
 delete mode 100644 src/themes/teams-high-contrast/componentVariables.ts
 delete mode 100644 src/themes/teams-high-contrast/components/Button/buttonStyles.ts
 delete mode 100644 src/themes/teams-high-contrast/components/Button/buttonVariables.ts

diff --git a/src/themes/teams-dark/componentStyles.ts b/src/themes/teams-dark/componentStyles.ts
deleted file mode 100644
index 440bb906eb..0000000000
--- a/src/themes/teams-dark/componentStyles.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Button } from './components/Button/buttonStyles'
diff --git a/src/themes/teams-dark/components/Button/buttonStyles.ts b/src/themes/teams-dark/components/Button/buttonStyles.ts
deleted file mode 100644
index 42d54f2490..0000000000
--- a/src/themes/teams-dark/components/Button/buttonStyles.ts
+++ /dev/null
@@ -1,164 +0,0 @@
-import { pxToRem } from '../../../../lib'
-import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
-import { IButtonProps } from '../../../../components/Button/Button'
-
-const buttonStyles: IComponentPartStylesInput<IButtonProps, any> = {
-  root: ({ props, variables }): ICSSInJSStyle => {
-    const { circular, disabled, type, text, isFromKeyboard } = props
-    const primary = type === 'primary'
-    const secondary = type === 'secondary'
-
-    const {
-      color,
-      backgroundColor,
-      backgroundColorHover,
-      typeDisabledButtonColor,
-      typeDisabledButtonBackgroundColor,
-      typePrimaryColor,
-      typePrimaryBackgroundColor,
-      typePrimaryBackgroundColorActive,
-      typePrimaryBackgroundColorHover,
-      typePrimaryBackgroundColorFocus,
-      typePrimaryBorderColor,
-      typePrimaryBorderColorFocus,
-      typePrimaryBorderColorInsetFocus,
-      typeSecondaryColor,
-      typeSecondaryBackgroundColor,
-      typeSecondaryBackgroundColorActive,
-      typeSecondaryBackgroundColorHover,
-      typeSecondaryBackgroundColorFocus,
-      typeSecondaryBorderColor,
-      typeSecondaryBorderColorActive,
-      typeSecondaryBorderColorHover,
-      typeSecondaryBorderColorFocus,
-      typeSecondaryBorderColorInsetFocus,
-      typeTextColorHover,
-      typeTextPrimaryColor,
-      typeTextPrimaryColorHover,
-      typeTextSecondaryColor,
-      typeTextSecondaryColorHover,
-    } = variables
-
-    return {
-      color,
-      backgroundColor,
-
-      ...(!text && {
-        borderWidth: `${secondary ? (circular ? 1 : 2) : 0}px`,
-        ':hover': {
-          backgroundColor: backgroundColorHover,
-        },
-      }),
-
-      ...(text && {
-        backgroundColor: 'transparent',
-        borderColor: 'transparent',
-        ':hover': {
-          color: typeTextColorHover,
-        },
-      }),
-
-      ...(primary &&
-        !text && {
-          color: typePrimaryColor,
-          backgroundColor: typePrimaryBackgroundColor,
-          border: `${pxToRem(1)} solid ${typePrimaryBorderColor}`,
-          ':active': {
-            backgroundColor: typePrimaryBackgroundColorActive,
-          },
-          ':hover': {
-            color: typePrimaryColor,
-            backgroundColor: typePrimaryBackgroundColorHover,
-          },
-        }),
-
-      ...(primary &&
-        !text &&
-        !circular && {
-          outline: 0,
-          ':focus': {
-            ...(isFromKeyboard && {
-              backgroundColor: typePrimaryBackgroundColorFocus,
-              borderColor: typePrimaryBorderColorFocus,
-              '::before': {
-                content: '""',
-                position: 'absolute',
-                top: '0',
-                left: '0',
-                right: '0',
-                bottom: '0',
-                border: `${pxToRem(1)} solid ${typePrimaryBorderColorInsetFocus}`,
-                borderRadius: `${pxToRem(2)}`,
-              },
-            }),
-          },
-        }),
-
-      ...(primary &&
-        text && {
-          color: typeTextPrimaryColor,
-          ':hover': {
-            color: typeTextPrimaryColorHover,
-          },
-        }),
-
-      ...(secondary &&
-        !text && {
-          color: typeSecondaryColor,
-          backgroundColor: typeSecondaryBackgroundColor,
-          borderColor: typeSecondaryBorderColor,
-          border: `${pxToRem(1)} solid ${typeSecondaryBorderColor}`,
-          ':active': {
-            backgroundColor: typeSecondaryBackgroundColorActive,
-            borderColor: typeSecondaryBorderColorActive,
-          },
-          ':hover': {
-            backgroundColor: typeSecondaryBackgroundColorHover,
-            borderColor: typeSecondaryBorderColorHover,
-          },
-        }),
-
-      ...(secondary &&
-        !text &&
-        !circular && {
-          outline: 0,
-          ':focus': {
-            ...(isFromKeyboard && {
-              backgroundColor: typeSecondaryBackgroundColorFocus,
-              borderColor: typeSecondaryBorderColorFocus,
-              '::before': {
-                content: '""',
-                position: 'absolute',
-                top: '0',
-                left: '0',
-                right: '0',
-                bottom: '0',
-                border: `${pxToRem(1)} solid ${typeSecondaryBorderColorInsetFocus}`,
-                borderRadius: `${pxToRem(2)}`,
-              },
-            }),
-          },
-        }),
-
-      ...(secondary &&
-        text && {
-          color: typeTextSecondaryColor,
-          ':hover': {
-            color: typeTextSecondaryColorHover,
-          },
-        }),
-
-      ...(disabled && {
-        color: typeDisabledButtonColor,
-        backgroundColor: typeDisabledButtonBackgroundColor,
-        borderColor: typeDisabledButtonBackgroundColor,
-        ':hover': {
-          backgroundColor: typeDisabledButtonBackgroundColor,
-          borderColor: typeDisabledButtonBackgroundColor,
-        },
-      }),
-    }
-  },
-}
-
-export default buttonStyles
diff --git a/src/themes/teams-dark/index.ts b/src/themes/teams-dark/index.ts
index 099a37d604..4cd2c1e2b5 100644
--- a/src/themes/teams-dark/index.ts
+++ b/src/themes/teams-dark/index.ts
@@ -1,15 +1,6 @@
-import { IThemeInput } from '../../../types/theme'
-
+import mergeThemes from '../../lib/mergeThemes'
 import * as siteVariables from './siteVariables'
 import * as componentVariables from './componentVariables'
-import * as componentStyles from './componentStyles'
-import { default as teams } from '../teams'
-import mergeThemes from '../../lib/mergeThemes'
-
-export const teamsDarkOnly = {
-  siteVariables,
-  componentVariables,
-  componentStyles,
-} as IThemeInput
+import teams from '../teams'
 
-export default mergeThemes(teams, teamsDarkOnly)
+export default mergeThemes(teams, { siteVariables, componentVariables })
diff --git a/src/themes/teams-dark/siteVariables.ts b/src/themes/teams-dark/siteVariables.ts
index 2349303d64..51b8027cc6 100644
--- a/src/themes/teams-dark/siteVariables.ts
+++ b/src/themes/teams-dark/siteVariables.ts
@@ -1,93 +1,26 @@
-import { pxToRem } from '../../lib'
-
-//
-// VARIABLES
-//
-export const htmlFontSize = '10px' // what 1rem represents
-
 //
 // COLORS
 //
-export const black = '#252423'
-export const gray02 = '#484644'
-export const gray03 = '#605E5C'
-export const gray04 = '#979593'
-export const gray06 = '#C8C6C4'
-export const gray08 = '#E1DFDD'
-export const gray09 = '#EDEBE9'
-export const gray10 = '#F3F2F1'
-export const gray14 = '#FAF9F8'
-export const fontBlack = black
-
-export const white = '#FFF'
+export const gray02 = '#bfbfbf'
+export const gray03 = '#a6a6a6'
+export const gray04 = '#808080'
+export const gray06 = '#4d4d4d'
+export const gray08 = '#262626'
+export const gray09 = '#292827'
+export const gray10 = '#2d2c2c'
+export const gray14 = '#292828'
 
 export const brand = '#6264A7'
-export const brand02 = '#33344A'
-export const brand04 = '#464775'
-export const brand06 = '#6264A7'
-export const brand08 = '#8B8CC7'
-export const brand12 = '#BDBDE6'
-export const brand14 = '#E2E2F6'
-export const brand16 = '#F4F4FC'
-
-export const orange04 = '#CC4A31'
-export const magenta = '#B24782'
-export const orchid = '#943670'
-export const red = '#C4314B'
-export const red08 = '#F3D6DB'
-export const yellow = '#F8D22A'
-export const green = '#92C353'
-export const green04 = '#237b4b'
-
-//
-// FONT SIZES
-//
-export const fontSizeX4 = pxToRem(72)
-export const fontSizeX3 = pxToRem(48)
-export const fontSizeX2 = pxToRem(36)
-export const fontSizeExtraLarge = pxToRem(24)
-export const fontSizeLarge = pxToRem(18)
-export const fontSizeMedium = pxToRem(14)
-export const fontSizeSmall = pxToRem(12)
-export const fontSizeExtraSmall = pxToRem(10)
-
-//
-// STATUS COLORS
-//
-export const successStatusBackgroundColor = green
-export const successStatusTextColor = white
-export const infoStatusBackgroundColor = 'blue'
-export const infoStatusTextColor = white
-export const warningStatusBackgroundColor = yellow
-export const warningStatusTextColor = white
-export const errorStatusBackgroundColor = red
-export const errorStatusTextColor = white
-export const unknownStatusBackgroundColor = gray04
-export const unknownStatusTextColor = white
-
-//
-// FONT WEIGHTS
-//
-export const fontWeightLight = 200
-export const fontWeightSemilight = 300
-export const fontWeightRegular = 400
-export const fontWeightSemibold = 600
-export const fontWeightBold = 700
-
-//
-// LINE HEIGHTS
-//
-export const lineHeightBase = 1.4286
-export const lineHeightSmall = 1.3333
-export const lineHeightExtraSmall = 1.2
-
-//
-// SEMANTIC ASSIGNMENTS
-//
-export const bodyPadding = 0
-export const bodyMargin = 0
-export const bodyFontFamily =
-  '"Segoe UI", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif'
-export const bodyFontSize = '1.4rem'
-export const bodyColor = black
-export const bodyLineHeight = lineHeightBase
+export const brand02 = '#e2e2f6'
+export const brand04 = '#bdbde6'
+export const brand06 = '#a6a7dc'
+export const brand08 = '#8b8cc7'
+export const brand12 = brand
+export const brand14 = '#464775'
+export const brand16 = '#33344a'
+
+export const orange04 = '#e97548'
+export const magenta = '#cf6098'
+export const orchid = '#ae3d84'
+export const red = '#d74654'
+export const red08 = '#4f232b'
diff --git a/src/themes/teams-high-contrast/componentStyles.ts b/src/themes/teams-high-contrast/componentStyles.ts
deleted file mode 100644
index 440bb906eb..0000000000
--- a/src/themes/teams-high-contrast/componentStyles.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Button } from './components/Button/buttonStyles'
diff --git a/src/themes/teams-high-contrast/componentVariables.ts b/src/themes/teams-high-contrast/componentVariables.ts
deleted file mode 100644
index e17b98e8c2..0000000000
--- a/src/themes/teams-high-contrast/componentVariables.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default as Button } from './components/Button/buttonVariables'
diff --git a/src/themes/teams-high-contrast/components/Button/buttonStyles.ts b/src/themes/teams-high-contrast/components/Button/buttonStyles.ts
deleted file mode 100644
index e89e3c8ba3..0000000000
--- a/src/themes/teams-high-contrast/components/Button/buttonStyles.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { pxToRem } from '../../../../lib'
-import { IComponentPartStylesInput, ICSSInJSStyle } from '../../../../../types/theme'
-import { IButtonProps } from '../../../../components/Button/Button'
-
-const buttonStyles: IComponentPartStylesInput<IButtonProps, any> = {
-  root: ({ props, variables }): ICSSInJSStyle => {
-    const { type, text } = props
-    const primary = type === 'primary'
-    const secondary = type === 'secondary'
-
-    const {
-      color,
-      backgroundColor,
-      backgroundColorHover,
-      typePrimaryColor,
-      typePrimaryBackgroundColor,
-      typePrimaryBackgroundColorHover,
-      typePrimaryBorderColor,
-      typeSecondaryColor,
-      typeSecondaryBackgroundColor,
-      typeSecondaryBackgroundColorHover,
-      typeSecondaryBorderColor,
-      typeSecondaryBorderColorHover,
-      typeTextSecondaryColor,
-      typeTextSecondaryColorHover,
-    } = variables
-
-    return {
-      color,
-      backgroundColor,
-
-      ...(!text && {
-        ':hover': {
-          backgroundColor: backgroundColorHover,
-        },
-      }),
-
-      ...(primary &&
-        !text && {
-          color: typePrimaryColor,
-          backgroundColor: typePrimaryBackgroundColor,
-          border: `${pxToRem(1)} solid ${typePrimaryBorderColor}`,
-          ':hover': {
-            color: typePrimaryColor,
-            backgroundColor: typePrimaryBackgroundColorHover,
-          },
-        }),
-
-      ...(secondary &&
-        !text && {
-          color: typeSecondaryColor,
-          backgroundColor: typeSecondaryBackgroundColor,
-          borderColor: typeSecondaryBorderColor,
-          border: `${pxToRem(1)} solid ${typeSecondaryBorderColor}`,
-          ':hover': {
-            backgroundColor: typeSecondaryBackgroundColorHover,
-            borderColor: typeSecondaryBorderColorHover,
-          },
-        }),
-
-      ...(secondary &&
-        text && {
-          color: typeTextSecondaryColor,
-          ':hover': {
-            color: typeTextSecondaryColorHover,
-          },
-        }),
-    }
-  },
-}
-
-export default buttonStyles
diff --git a/src/themes/teams-high-contrast/components/Button/buttonVariables.ts b/src/themes/teams-high-contrast/components/Button/buttonVariables.ts
deleted file mode 100644
index b178d79313..0000000000
--- a/src/themes/teams-high-contrast/components/Button/buttonVariables.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-export interface IButtonVariables {
-  [key: string]: string | number
-
-  color: string
-  backgroundColor: string
-  backgroundColorHover: string
-  typePrimaryColor: string
-  typePrimaryBackgroundColor: string
-  typePrimaryBackgroundColorHover: string
-  typeSecondaryColor: string
-  typeSecondaryBackgroundColor: string
-  typeSecondaryBackgroundColorHover: string
-}
-
-export default (siteVars: any): IButtonVariables => {
-  return {
-    color: siteVars.white,
-    backgroundColor: siteVars.black,
-    backgroundColorHover: siteVars.yellow,
-    typePrimaryColor: siteVars.white,
-    typePrimaryBackgroundColor: siteVars.black,
-    typePrimaryBackgroundColorHover: siteVars.yellow,
-    typeSecondaryColor: siteVars.white,
-    typeSecondaryBackgroundColor: siteVars.black,
-    typeSecondaryBackgroundColorHover: siteVars.yellow,
-  }
-}
diff --git a/src/themes/teams-high-contrast/index.ts b/src/themes/teams-high-contrast/index.ts
index 5c2472f5be..6ebff98067 100644
--- a/src/themes/teams-high-contrast/index.ts
+++ b/src/themes/teams-high-contrast/index.ts
@@ -1,14 +1,5 @@
-import * as siteVariables from './siteVariables'
-import * as componentVariables from './componentVariables'
-import * as componentStyles from './componentStyles'
-import { IThemeInput } from '../../../types/theme'
 import mergeThemes from '../../lib/mergeThemes'
-import { default as teams } from '../teams'
-
-export const teamsHighContrastOnly = {
-  siteVariables,
-  componentVariables,
-  componentStyles,
-} as IThemeInput
+import * as siteVariables from './siteVariables'
+import teams from '../teams'
 
-export default mergeThemes(teams, teamsHighContrastOnly)
+export default mergeThemes(teams, { siteVariables })
diff --git a/src/themes/teams-high-contrast/siteVariables.ts b/src/themes/teams-high-contrast/siteVariables.ts
index 2349303d64..96cd019900 100644
--- a/src/themes/teams-high-contrast/siteVariables.ts
+++ b/src/themes/teams-high-contrast/siteVariables.ts
@@ -1,93 +1,6 @@
-import { pxToRem } from '../../lib'
-
-//
-// VARIABLES
-//
-export const htmlFontSize = '10px' // what 1rem represents
-
-//
-// COLORS
-//
-export const black = '#252423'
-export const gray02 = '#484644'
-export const gray03 = '#605E5C'
-export const gray04 = '#979593'
-export const gray06 = '#C8C6C4'
-export const gray08 = '#E1DFDD'
-export const gray09 = '#EDEBE9'
-export const gray10 = '#F3F2F1'
-export const gray14 = '#FAF9F8'
-export const fontBlack = black
-
-export const white = '#FFF'
-
-export const brand = '#6264A7'
-export const brand02 = '#33344A'
-export const brand04 = '#464775'
-export const brand06 = '#6264A7'
-export const brand08 = '#8B8CC7'
-export const brand12 = '#BDBDE6'
-export const brand14 = '#E2E2F6'
-export const brand16 = '#F4F4FC'
-
-export const orange04 = '#CC4A31'
-export const magenta = '#B24782'
-export const orchid = '#943670'
-export const red = '#C4314B'
-export const red08 = '#F3D6DB'
-export const yellow = '#F8D22A'
-export const green = '#92C353'
-export const green04 = '#237b4b'
-
-//
-// FONT SIZES
-//
-export const fontSizeX4 = pxToRem(72)
-export const fontSizeX3 = pxToRem(48)
-export const fontSizeX2 = pxToRem(36)
-export const fontSizeExtraLarge = pxToRem(24)
-export const fontSizeLarge = pxToRem(18)
-export const fontSizeMedium = pxToRem(14)
-export const fontSizeSmall = pxToRem(12)
-export const fontSizeExtraSmall = pxToRem(10)
-
-//
-// STATUS COLORS
-//
-export const successStatusBackgroundColor = green
-export const successStatusTextColor = white
-export const infoStatusBackgroundColor = 'blue'
-export const infoStatusTextColor = white
-export const warningStatusBackgroundColor = yellow
-export const warningStatusTextColor = white
-export const errorStatusBackgroundColor = red
-export const errorStatusTextColor = white
-export const unknownStatusBackgroundColor = gray04
-export const unknownStatusTextColor = white
-
-//
-// FONT WEIGHTS
-//
-export const fontWeightLight = 200
-export const fontWeightSemilight = 300
-export const fontWeightRegular = 400
-export const fontWeightSemibold = 600
-export const fontWeightBold = 700
-
-//
-// LINE HEIGHTS
-//
-export const lineHeightBase = 1.4286
-export const lineHeightSmall = 1.3333
-export const lineHeightExtraSmall = 1.2
+import { white } from '../teams/siteVariables'
 
 //
 // SEMANTIC ASSIGNMENTS
 //
-export const bodyPadding = 0
-export const bodyMargin = 0
-export const bodyFontFamily =
-  '"Segoe UI", "Helvetica Neue", "Apple Color Emoji", "Segoe UI Emoji", Helvetica, Arial, sans-serif'
-export const bodyFontSize = '1.4rem'
-export const bodyColor = black
-export const bodyLineHeight = lineHeightBase
+export const bodyColor = white
diff --git a/src/themes/teams/components/Input/inputVariables.ts b/src/themes/teams/components/Input/inputVariables.ts
index d32c23bdb6..060bd6b50d 100644
--- a/src/themes/teams/components/Input/inputVariables.ts
+++ b/src/themes/teams/components/Input/inputVariables.ts
@@ -7,7 +7,7 @@ export default (siteVars: any) => {
   vars.borderBottom = `${pxToRem(2)} solid transparent`
   vars.backgroundColor = siteVars.gray10
 
-  vars.fontColor = siteVars.fontBlack
+  vars.fontColor = siteVars.bodyColor
   vars.fontSize = siteVars.fontSizes.medium
 
   vars.inputPadding = `${pxToRem(6)} ${pxToRem(24)} ${pxToRem(6)} ${pxToRem(12)}`
diff --git a/src/themes/teams/siteVariables.ts b/src/themes/teams/siteVariables.ts
index 3c74615a62..ea1fc3af7d 100644
--- a/src/themes/teams/siteVariables.ts
+++ b/src/themes/teams/siteVariables.ts
@@ -17,7 +17,6 @@ export const gray08 = '#E1DFDD'
 export const gray09 = '#EDEBE9'
 export const gray10 = '#F3F2F1'
 export const gray14 = '#FAF9F8'
-export const fontBlack = black
 
 export const white = '#FFF'
 
diff --git a/src/themes/teams/staticStyles/globalStyles.ts b/src/themes/teams/staticStyles/globalStyles.ts
index 0148b5cbee..48a221ec77 100644
--- a/src/themes/teams/staticStyles/globalStyles.ts
+++ b/src/themes/teams/staticStyles/globalStyles.ts
@@ -1,4 +1,6 @@
-const globalStyles = siteVars => ({
+import { StaticStyleFunction } from '../../../../types/theme'
+
+const globalStyles: StaticStyleFunction = siteVars => ({
   html: {
     fontSize: siteVars.htmlFontSize,
   },

From e81677a4da2259905c98f68d6512fd9ae745dc73 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Mon, 1 Oct 2018 11:38:20 +0200
Subject: [PATCH 14/23] -added dev mode decorator for the theme switching

---
 docs/src/components/Sidebar/Sidebar.tsx | 30 +++++++++++++------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx
index 7b624f0f2e..4203da168c 100644
--- a/docs/src/components/Sidebar/Sidebar.tsx
+++ b/docs/src/components/Sidebar/Sidebar.tsx
@@ -207,20 +207,22 @@ class Sidebar extends React.Component<any, any> {
             </Menu.Item>
           </Menu.Menu>
         </Menu.Item>
-        <Menu.Item>
-          <p>Theme:</p>
-          <select
-            placeholder="Select theme..."
-            defaultValue={themeName}
-            onChange={this.handleThemeChange}
-          >
-            {this.getThemeOptions().map(o => (
-              <option key={o.value} value={o.value}>
-                {o.text}
-              </option>
-            ))}
-          </select>
-        </Menu.Item>
+        {process.env.NODE_ENV !== 'production' && (
+          <Menu.Item>
+            <p>Theme:</p>
+            <select
+              placeholder="Select theme..."
+              defaultValue={themeName}
+              onChange={this.handleThemeChange}
+            >
+              {this.getThemeOptions().map(o => (
+                <option key={o.value} value={o.value}>
+                  {o.text}
+                </option>
+              ))}
+            </select>
+          </Menu.Item>
+        )}
         <Menu.Item as={NavLink} exact to="/" activeClassName="active">
           Introduction
         </Menu.Item>

From 2933d8f016ea14de61b2afb3121ea63b49fd808a Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Mon, 1 Oct 2018 19:06:58 +0200
Subject: [PATCH 15/23] -removing static styles for the semantic ui dropdown

---
 docs/src/Style.ts | 16 ----------------
 1 file changed, 16 deletions(-)

diff --git a/docs/src/Style.ts b/docs/src/Style.ts
index 3d62f84cf4..1008bf1016 100644
--- a/docs/src/Style.ts
+++ b/docs/src/Style.ts
@@ -37,20 +37,4 @@ export const semanticCssOverrides = `
     color: rgba(255,255,255,.7)!important;
     cursor: not-allowed!important;
   }
-
-   .ui.dropdown, .ui.dropdown.active.visible {
-    background-color: rgba(255, 255, 255, 0.15)!important;
-    color: #bebebe!important;
-  }
-  .ui.menu .ui.dropdown .menu>.item  {
-    background-color: black!important;
-    color: white!important;
-  }
-  ui.menu .ui.dropdown .menu>.item :hover {
-    background-color: rgba(255, 255, 255, 0.15)!important;
-  }
-  .ui.menu .ui.dropdown .menu>.active.item {
-    background-color: black!important;
-    color: white!important;
-  }
 `

From 090364b0c61d3be6e0bdaebeaccfa33fd2ef5cbb Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Mon, 1 Oct 2018 19:59:39 +0200
Subject: [PATCH 16/23] -fixing issue with changing body font size

---
 .../ComponentDoc/ComponentExample/ComponentExample.tsx           | 1 -
 1 file changed, 1 deletion(-)

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index 2acf5d9e99..fbab8da0ce 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -370,7 +370,6 @@ class ComponentExample extends React.Component<IComponentExampleProps, IComponen
     const theme = themes[themeName]
 
     const newTheme: IThemeInput = {
-      ...theme,
       componentVariables,
       rtl: showRtl,
     }

From e7d7ca3cd10a7cfec4da713bc4c934c9b3283c12 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Mon, 1 Oct 2018 20:06:47 +0200
Subject: [PATCH 17/23] -removing unused variables

---
 .../ComponentDoc/ComponentExample/ComponentExample.tsx        | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index fbab8da0ce..323cbdab1e 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -364,10 +364,6 @@ class ComponentExample extends React.Component<IComponentExampleProps, IComponen
 
   private renderWithProvider(ExampleComponent) {
     const { showRtl, componentVariables } = this.state
-    const {
-      themeStore: { themeName },
-    } = this.props
-    const theme = themes[themeName]
 
     const newTheme: IThemeInput = {
       componentVariables,

From efdc0af6b79fa935923957c5442e421ee2cb5030 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Tue, 2 Oct 2018 15:15:13 +0200
Subject: [PATCH 18/23] -ComponentExample: state's componentVariables now holds
 just the variables for the component styling at that moment -on opening the
 variables form the merged variables from the theme as well as the state's
 variables are shown: fixing current issue where the rendered element does not
 corresponds with the variables values shown in the form

---
 .../ComponentExample/ComponentExample.tsx     | 27 ++++++++++---------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index 323cbdab1e..00228263ba 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -26,6 +26,7 @@ import { IThemeInput, IThemePrepared } from 'types/theme'
 import { inject, observer } from 'mobx-react'
 import { ThemeManager } from '../../../data/theme-manager'
 import { AppStateStore } from '../../../data/models'
+import { mergeThemeVariables } from '../../../../../src/lib/mergeThemes'
 
 export interface IComponentExampleProps extends RouteComponentProps<any, any> {
   title: string
@@ -364,9 +365,13 @@ class ComponentExample extends React.Component<IComponentExampleProps, IComponen
 
   private renderWithProvider(ExampleComponent) {
     const { showRtl, componentVariables } = this.state
+    const { themeName } = this.props.themeStore
+    const theme = themes[themeName]
 
     const newTheme: IThemeInput = {
-      componentVariables,
+      componentVariables: mergeThemeVariables(theme.componentVariables, {
+        [this.getDisplayName()]: componentVariables,
+      }),
       rtl: showRtl,
     }
 
@@ -557,7 +562,10 @@ class ComponentExample extends React.Component<IComponentExampleProps, IComponen
         </Divider>
         <Provider.Consumer
           render={({ siteVariables, componentVariables }: IThemePrepared) => {
-            const variables = componentVariables[displayName]
+            const mergedVariables = mergeThemeVariables(componentVariables, {
+              [displayName]: this.state.componentVariables,
+            })
+            const variables = mergedVariables[displayName]
 
             if (!variables) {
               return (
@@ -595,20 +603,13 @@ class ComponentExample extends React.Component<IComponentExampleProps, IComponen
   }
 
   private handleVariableChange = (component, variable) => (e, { value }) => {
-    const {
-      themeStore: { themeName },
-    } = this.props
-    const theme = themes[themeName]
     this.setState(
-      {
+      state => ({
         componentVariables: {
-          ...theme.componentVariables,
-          [component]: {
-            ...(theme.componentVariables && theme.componentVariables[component]),
-            [variable]: value,
-          },
+          ...state.componentVariables,
+          [variable]: value,
         },
-      },
+      }),
       this.renderSourceCode,
     )
   }

From 60c8720d7bb042f09f036142d874554d6aed4522 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Tue, 2 Oct 2018 17:00:19 +0200
Subject: [PATCH 19/23] -replaced mobx with react context API

---
 .../ComponentExample/ComponentExample.tsx     |  28 ++-
 docs/src/components/Sidebar/Sidebar.tsx       | 165 +++++++++---------
 docs/src/context/theme-context.tsx            |   6 +
 docs/src/data/models.ts                       |  12 --
 docs/src/data/theme-manager.ts                |  24 ---
 docs/src/index.tsx                            |  10 +-
 docs/src/routes.tsx                           |  83 +++++----
 package.json                                  |   2 -
 yarn.lock                                     |  13 +-
 9 files changed, 150 insertions(+), 193 deletions(-)
 create mode 100644 docs/src/context/theme-context.tsx
 delete mode 100644 docs/src/data/models.ts
 delete mode 100644 docs/src/data/theme-manager.ts

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index 00228263ba..4c3a187228 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -23,17 +23,15 @@ import ComponentExampleTitle from './ComponentExampleTitle'
 import ContributionPrompt from '../ContributionPrompt'
 import getSourceCodeManager, { ISourceCodeManager, SourceCodeType } from './SourceCodeManager'
 import { IThemeInput, IThemePrepared } from 'types/theme'
-import { inject, observer } from 'mobx-react'
-import { ThemeManager } from '../../../data/theme-manager'
-import { AppStateStore } from '../../../data/models'
 import { mergeThemeVariables } from '../../../../../src/lib/mergeThemes'
+import { ThemeContext } from '../../../context/theme-context'
 
 export interface IComponentExampleProps extends RouteComponentProps<any, any> {
   title: string
   description: string
   examplePath: string
   suiVersion?: string
-  themeStore?: ThemeManager
+  themeName?: string
 }
 
 interface IComponentExampleState {
@@ -68,10 +66,6 @@ const codeTypeApiButtonLabels: { [key in SourceCodeType]: string } = {
  * Renders a `component` and the raw `code` that produced it.
  * Allows toggling the the raw `code` code block.
  */
-@inject((appState: AppStateStore) => ({
-  themeStore: appState.themeStore,
-}))
-@observer
 class ComponentExample extends React.Component<IComponentExampleProps, IComponentExampleState> {
   private componentRef: React.Component
   private sourceCodeMgr: ISourceCodeManager
@@ -106,7 +100,7 @@ class ComponentExample extends React.Component<IComponentExampleProps, IComponen
     match: PropTypes.object.isRequired,
     suiVersion: PropTypes.string,
     title: PropTypes.node,
-    themeStore: PropTypes.any,
+    themeName: PropTypes.string,
   }
 
   public componentWillMount() {
@@ -135,11 +129,9 @@ class ComponentExample extends React.Component<IComponentExampleProps, IComponen
     ) {
       this.clearActiveState()
     }
-    const {
-      themeStore: { themeName },
-    } = nextProps
+    const { themeName } = nextProps
     if (this.state.themeName !== themeName) {
-      this.setState({ themeName: nextProps.themeStore.themeName }, this.renderSourceCode)
+      this.setState({ themeName }, this.renderSourceCode)
     }
   }
 
@@ -365,7 +357,7 @@ class ComponentExample extends React.Component<IComponentExampleProps, IComponen
 
   private renderWithProvider(ExampleComponent) {
     const { showRtl, componentVariables } = this.state
-    const { themeName } = this.props.themeStore
+    const { themeName } = this.state
     const theme = themes[themeName]
 
     const newTheme: IThemeInput = {
@@ -716,4 +708,10 @@ class ComponentExample extends React.Component<IComponentExampleProps, IComponen
   }
 }
 
-export default withRouter(ComponentExample)
+const ComponentExampleWithTheme = React.forwardRef((props: IComponentExampleProps) => (
+  <ThemeContext.Consumer>
+    {({ themeName }) => <ComponentExample {...props} themeName={themeName} />}
+  </ThemeContext.Consumer>
+))
+
+export default withRouter(ComponentExampleWithTheme)
diff --git a/docs/src/components/Sidebar/Sidebar.tsx b/docs/src/components/Sidebar/Sidebar.tsx
index 1e34cb2c40..e398d9d4e0 100644
--- a/docs/src/components/Sidebar/Sidebar.tsx
+++ b/docs/src/components/Sidebar/Sidebar.tsx
@@ -6,12 +6,11 @@ import { findDOMNode } from 'react-dom'
 import { NavLink } from 'react-router-dom'
 import { withRouter } from 'react-router'
 import { Icon, Input as SemanticUIInput, Menu } from 'semantic-ui-react'
-import { inject, observer } from 'mobx-react'
 
 import Logo from 'docs/src/components/Logo/Logo'
 import { getComponentPathname, repoURL, typeOrder } from 'docs/src/utils'
 import { themes } from '@stardust-ui/react'
-import { AppStateStore } from '../../data/models'
+import { ThemeContext } from '../../context/theme-context'
 
 const pkg = require('../../../../package.json')
 const componentMenu = require('docs/src/componentMenu')
@@ -21,17 +20,12 @@ const selectedItemLabelStyle: any = { color: '#35bdb2', float: 'right' }
 const selectedItemLabel = <span style={selectedItemLabelStyle}>Press Enter</span>
 type ComponentMenuItem = { displayName: string; type: string }
 
-@inject((appState: AppStateStore) => ({
-  themeStore: appState.themeStore,
-}))
-@observer
 class Sidebar extends React.Component<any, any> {
   static propTypes = {
     match: PropTypes.object.isRequired,
     location: PropTypes.object.isRequired,
     history: PropTypes.object.isRequired,
     style: PropTypes.object,
-    themeStore: PropTypes.any,
   }
   state: any = { query: '' }
   _searchInput: any
@@ -171,93 +165,90 @@ class Sidebar extends React.Component<any, any> {
     return <Menu.Menu>{menuItems}</Menu.Menu>
   }
 
-  private handleThemeChange = (event: any) => {
-    const { themeStore } = this.props
-    const themeName = event.target.value
-    themeStore.changeTheme(themeName)
-  }
-
   render() {
-    const {
-      style,
-      themeStore: { themeName },
-    } = this.props
+    const { style } = this.props
     const { query } = this.state
     return (
-      <Menu vertical fixed="left" inverted style={{ ...style }}>
-        <Menu.Item>
-          <Logo spaced="right" size="mini" />
-          <strong>
-            Stardust UI React &nbsp;
-            <small>
-              <em>{pkg.version}</em>
-            </small>
-          </strong>
-          <Menu.Menu>
-            <Menu.Item as="a" href={repoURL} target="_blank" rel="noopener noreferrer">
-              <Icon name="github" /> GitHub
-            </Menu.Item>
-            <Menu.Item
-              as="a"
-              href={`${repoURL}/blob/master/CHANGELOG.md`}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              <Icon name="file alternate outline" /> CHANGELOG
+      <ThemeContext.Consumer>
+        {({ themeName, changeTheme }) => (
+          <Menu vertical fixed="left" inverted style={{ ...style }}>
+            <Menu.Item>
+              <Logo spaced="right" size="mini" />
+              <strong>
+                Stardust UI React &nbsp;
+                <small>
+                  <em>{pkg.version}</em>
+                </small>
+              </strong>
+              <Menu.Menu>
+                <Menu.Item as="a" href={repoURL} target="_blank" rel="noopener noreferrer">
+                  <Icon name="github" /> GitHub
+                </Menu.Item>
+                <Menu.Item
+                  as="a"
+                  href={`${repoURL}/blob/master/CHANGELOG.md`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <Icon name="file alternate outline" /> CHANGELOG
+                </Menu.Item>
+              </Menu.Menu>
             </Menu.Item>
-          </Menu.Menu>
-        </Menu.Item>
-        {process.env.NODE_ENV !== 'production' && (
-          <Menu.Item>
-            <p>Theme:</p>
-            <select
-              placeholder="Select theme..."
-              defaultValue={themeName}
-              onChange={this.handleThemeChange}
-            >
-              {this.getThemeOptions().map(o => (
-                <option key={o.value} value={o.value}>
-                  {o.text}
-                </option>
-              ))}
-            </select>
-          </Menu.Item>
-        )}
-        <Menu.Item as={NavLink} exact to="/" activeClassName="active">
-          Introduction
-        </Menu.Item>
-        <Menu.Item>
-          Guides
-          <Menu.Menu>
-            <Menu.Item as={NavLink} exact to="/quick-start" activeClassName="active">
-              Quick Start
+            {process.env.NODE_ENV !== 'production' && (
+              <Menu.Item>
+                <p>Theme:</p>
+                <select
+                  placeholder="Select theme..."
+                  defaultValue={themeName}
+                  onChange={e => {
+                    changeTheme(e.target.value)
+                  }}
+                >
+                  {this.getThemeOptions().map(o => (
+                    <option key={o.value} value={o.value}>
+                      {o.text}
+                    </option>
+                  ))}
+                </select>
+              </Menu.Item>
+            )}
+            <Menu.Item as={NavLink} exact to="/" activeClassName="active">
+              Introduction
             </Menu.Item>
-            <Menu.Item as={NavLink} exact to="/glossary" activeClassName="active">
-              Glossary
+            <Menu.Item>
+              Guides
+              <Menu.Menu>
+                <Menu.Item as={NavLink} exact to="/quick-start" activeClassName="active">
+                  Quick Start
+                </Menu.Item>
+                <Menu.Item as={NavLink} exact to="/glossary" activeClassName="active">
+                  Glossary
+                </Menu.Item>
+                <Menu.Item as={NavLink} exact to="/accessibility" activeClassName="active">
+                  Accessibility
+                </Menu.Item>
+                <Menu.Item as={NavLink} exact to="/theming" activeClassName="active">
+                  Theming
+                </Menu.Item>
+                <Menu.Item as={NavLink} exact to="/theming-examples" activeClassName="active">
+                  Theming Examples
+                </Menu.Item>
+              </Menu.Menu>
             </Menu.Item>
-            <Menu.Item as={NavLink} exact to="/accessibility" activeClassName="active">
-              Accessibility
+            <Menu.Item active>
+              <SemanticUIInput
+                className="transparent inverted icon"
+                icon="search"
+                placeholder="Search components..."
+                value={query}
+                onChange={this.handleSearchChange}
+                onKeyDown={this.handleSearchKeyDown}
+              />
             </Menu.Item>
-            <Menu.Item as={NavLink} exact to="/theming" activeClassName="active">
-              Theming
-            </Menu.Item>
-            <Menu.Item as={NavLink} exact to="/theming-examples" activeClassName="active">
-              Theming Examples
-            </Menu.Item>
-          </Menu.Menu>
-        </Menu.Item>
-        <Menu.Item active>
-          <SemanticUIInput
-            className="transparent inverted icon"
-            icon="search"
-            placeholder="Search components..."
-            value={query}
-            onChange={this.handleSearchChange}
-            onKeyDown={this.handleSearchKeyDown}
-          />
-        </Menu.Item>
-        {query ? this.renderSearchItems() : this.menuItemsByType}
-      </Menu>
+            {query ? this.renderSearchItems() : this.menuItemsByType}
+          </Menu>
+        )}
+      </ThemeContext.Consumer>
     )
   }
 
diff --git a/docs/src/context/theme-context.tsx b/docs/src/context/theme-context.tsx
new file mode 100644
index 0000000000..640c8470c6
--- /dev/null
+++ b/docs/src/context/theme-context.tsx
@@ -0,0 +1,6 @@
+import * as React from 'react'
+
+export const ThemeContext = React.createContext({
+  themeName: 'teams',
+  changeTheme: (newTheme: string) => {},
+})
diff --git a/docs/src/data/models.ts b/docs/src/data/models.ts
deleted file mode 100644
index c17eaa7705..0000000000
--- a/docs/src/data/models.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { ThemeManager } from './theme-manager'
-
-export class AppStateStore {
-  public readonly name = 'app-state-store'
-  public readonly themeStore: ThemeManager
-
-  constructor() {
-    this.themeStore = new ThemeManager()
-  }
-}
-
-export default () => new AppStateStore()
diff --git a/docs/src/data/theme-manager.ts b/docs/src/data/theme-manager.ts
deleted file mode 100644
index 9a3d602738..0000000000
--- a/docs/src/data/theme-manager.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { action, configure, observable } from 'mobx'
-
-configure({
-  enforceActions: true,
-})
-
-export interface IThemeManagerManager {
-  themeName: string
-
-  changeTheme(newThemeName: string): void
-}
-
-export class ThemeManager implements IThemeManagerManager {
-  @observable public themeName: string
-
-  @action
-  public changeTheme(newThemeName: string): void {
-    this.themeName = newThemeName
-  }
-
-  constructor() {
-    this.themeName = 'teams'
-  }
-}
diff --git a/docs/src/index.tsx b/docs/src/index.tsx
index 0005469e61..589e1419a9 100644
--- a/docs/src/index.tsx
+++ b/docs/src/index.tsx
@@ -1,11 +1,7 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import { AppContainer } from 'react-hot-loader'
-
-import { Provider } from 'mobx-react'
-
 import Router from './routes'
-import createAppStateStore from './data/models'
 
 // ----------------------------------------
 // Rendering
@@ -14,14 +10,10 @@ import createAppStateStore from './data/models'
 const mountNode = document.createElement('div')
 document.body.appendChild(mountNode)
 
-const appStateStore = createAppStateStore()
-
 const render = NewApp =>
   ReactDOM.render(
     <AppContainer>
-      <Provider {...appStateStore}>
-        <NewApp />
-      </Provider>
+      <NewApp />
     </AppContainer>,
     mountNode,
   )
diff --git a/docs/src/routes.tsx b/docs/src/routes.tsx
index 60bcfae384..02f826bb86 100644
--- a/docs/src/routes.tsx
+++ b/docs/src/routes.tsx
@@ -16,47 +16,66 @@ import { Provider, themes } from '@stardust-ui/react'
 
 import { mergeThemes } from '../../src/lib'
 import { semanticCssOverrides } from './Style'
-import { inject, observer } from 'mobx-react'
-import { AppStateStore } from './data/models'
+import { ThemeContext } from './context/theme-context'
 
 const semanticStyleOverrides = {
   staticStyles: [semanticCssOverrides],
 }
 
-@inject((appState: AppStateStore) => ({
-  themeStore: appState.themeStore,
-}))
-@observer
-class Router extends React.Component<any, any> {
+interface IRouterState {
+  themeName: string
+  changeTheme: (newTheme: string) => void
+}
+
+class Router extends React.Component<any, IRouterState> {
+  private changeTheme
+
+  constructor(props) {
+    super(props)
+
+    this.changeTheme = newTheme => {
+      this.setState({
+        themeName: newTheme,
+      })
+    }
+
+    // State also contains the updater function so it will
+    // be passed down into the context provider
+    this.state = {
+      themeName: 'teams',
+      changeTheme: this.changeTheme,
+    }
+  }
   render() {
-    const { themeStore } = this.props
-    const theme = themes[themeStore.themeName]
+    const { themeName } = this.state
     return (
-      <Provider
-        theme={mergeThemes(semanticStyleOverrides, theme, {
-          // adjust Teams' theme to Semantic UI's font size scheme
-          siteVariables: {
-            htmlFontSize: '14px',
-            bodyFontSize: '1rem',
-          },
-        })}
-      >
-        <BrowserRouter basename={__BASENAME__}>
-          <Switch>
-            <Route exact path="/maximize/:exampleName" component={ExternalExampleLayout} />
+      <ThemeContext.Provider value={this.state}>
+        <Provider
+          theme={mergeThemes(semanticStyleOverrides, themes[themeName], {
+            // adjust Teams' theme to Semantic UI's font size scheme
+            siteVariables: {
+              htmlFontSize: '14px',
+              bodyFontSize: '1rem',
+            },
+          })}
+        >
+          <BrowserRouter basename={__BASENAME__}>
             <Switch>
-              <DocsLayout exact path="/" component={Introduction} />
-              <DocsLayout exact path="/:type/:name" component={DocsRoot} sidebar />
-              <DocsLayout exact path="/quick-start" component={QuickStart} />
-              <DocsLayout exact path="/glossary" component={Glossary} />
-              <DocsLayout exact path="/accessibility" component={Accessibility} />
-              <DocsLayout exact path="/theming" component={Theming} />
-              <DocsLayout exact path="/theming-examples" component={ThemingExamples} />
-              <DocsLayout exact path="/*" component={PageNotFound} />
+              <Route exact path="/maximize/:exampleName" component={ExternalExampleLayout} />
+              <Switch>
+                <DocsLayout exact path="/" component={Introduction} />
+                <DocsLayout exact path="/:type/:name" component={DocsRoot} sidebar />
+                <DocsLayout exact path="/quick-start" component={QuickStart} />
+                <DocsLayout exact path="/glossary" component={Glossary} />
+                <DocsLayout exact path="/accessibility" component={Accessibility} />
+                <DocsLayout exact path="/theming" component={Theming} />
+                <DocsLayout exact path="/theming-examples" component={ThemingExamples} />
+                <DocsLayout exact path="/*" component={PageNotFound} />
+              </Switch>
             </Switch>
-          </Switch>
-        </BrowserRouter>
-      </Provider>
+          </BrowserRouter>
+        </Provider>
+      </ThemeContext.Provider>
     )
   }
 }
diff --git a/package.json b/package.json
index 20dbd144c9..ac7c6734ee 100644
--- a/package.json
+++ b/package.json
@@ -88,8 +88,6 @@
     "fela-plugin-rtl": "^1.0.6",
     "keyboard-key": "^1.0.1",
     "lodash": "^4.17.10",
-    "mobx": "^5.1.2",
-    "mobx-react": "^5.2.8",
     "prop-types": "^15.6.1",
     "react-fela": "^7.2.0",
     "react-popper": "^1.0.2",
diff --git a/yarn.lock b/yarn.lock
index 3786017e17..59ceb80728 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5414,17 +5414,6 @@ mkpath@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/mkpath/-/mkpath-0.1.0.tgz#7554a6f8d871834cc97b5462b122c4c124d6de91"
 
-mobx-react@^5.2.8:
-  version "5.2.8"
-  resolved "https://registry.yarnpkg.com/mobx-react/-/mobx-react-5.2.8.tgz#059c7f29254d7cd36e103d79113103b40348d3bf"
-  dependencies:
-    hoist-non-react-statics "^2.5.0"
-    react-lifecycles-compat "^3.0.2"
-
-mobx@^5.1.2:
-  version "5.1.2"
-  resolved "https://registry.yarnpkg.com/mobx/-/mobx-5.1.2.tgz#5a3a0bc381ba155901e33eabe492c3c7482e8b35"
-
 moment@2.x.x:
   version "2.22.2"
   resolved "https://registry.yarnpkg.com/moment/-/moment-2.22.2.tgz#3c257f9839fc0e93ff53149632239eb90783ff66"
@@ -6540,7 +6529,7 @@ react-is@^16.4.1:
   version "16.4.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"
 
-react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
+react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
 

From a08e6b736a9c993adea6ce193a587a1342f4f368 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Tue, 2 Oct 2018 17:02:06 +0200
Subject: [PATCH 20/23] -reverted tsconfig to the initial version

---
 build/tsconfig.docs.json | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/build/tsconfig.docs.json b/build/tsconfig.docs.json
index 8daa326c28..0b396f19cb 100644
--- a/build/tsconfig.docs.json
+++ b/build/tsconfig.docs.json
@@ -2,8 +2,7 @@
   "extends": "./tsconfig.common.json",
   "compilerOptions": {
     "module": "esnext",
-    "allowSyntheticDefaultImports": true,
-    "experimentalDecorators": true
+    "allowSyntheticDefaultImports": true
   },
   "include": [
     "../src",

From 6f91a4687334067a0423df87992d59ed0634c6ff Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 3 Oct 2018 11:35:46 +0200
Subject: [PATCH 21/23] -updated changelog

---
 CHANGELOG.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5b66980571..eba181892e 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Add focus styles for `Menu.Item` component @Bugaa92 ([#286](https://github.com/stardust-ui/react/pull/286))
 
+### Documentation
+- Add theme switcher for exploring different themes on the docs (under development mode flag) @mnajdova ([#280](https://github.com/stardust-ui/react/pull/280))
+
 <!--------------------------------[ v0.8.0 ]------------------------------- -->
 ## [v0.8.0](https://github.com/stardust-ui/react/tree/v0.8.0) (2018-10-01)
 [Compare changes](https://github.com/stardust-ui/react/compare/v0.7.0...v0.8.0)

From 426fd7186f12f7ce03f15aa9793a49f38e2d0e16 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 3 Oct 2018 13:54:09 +0200
Subject: [PATCH 22/23] -merging two lines

---
 .../ComponentExample/ComponentExample.tsx           | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index 4c3a187228..5bdcab6379 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -356,8 +356,7 @@ class ComponentExample extends React.Component<IComponentExampleProps, IComponen
   private getDisplayName = () => this.props.examplePath.split('/')[1]
 
   private renderWithProvider(ExampleComponent) {
-    const { showRtl, componentVariables } = this.state
-    const { themeName } = this.state
+    const { showRtl, componentVariables, themeName } = this.state
     const theme = themes[themeName]
 
     const newTheme: IThemeInput = {
@@ -554,10 +553,12 @@ class ComponentExample extends React.Component<IComponentExampleProps, IComponen
         </Divider>
         <Provider.Consumer
           render={({ siteVariables, componentVariables }: IThemePrepared) => {
-            const mergedVariables = mergeThemeVariables(componentVariables, {
-              [displayName]: this.state.componentVariables,
-            })
-            const variables = mergedVariables[displayName]
+            // const mergedVariables = mergeThemeVariables(componentVariables, {
+            //   [displayName]: this.state.componentVariables,
+            // })
+            // const variables = mergedVariables[displayName]
+
+            const variables = componentVariables[displayName]
 
             if (!variables) {
               return (

From 68eb2b1cac1f8d250d1f98a773f0bdb2e222d285 Mon Sep 17 00:00:00 2001
From: manajdov <manajdov@microsoft.com>
Date: Wed, 3 Oct 2018 14:29:06 +0200
Subject: [PATCH 23/23] -introduced app component as a root for the docs
 -reverted commenting of the merged variables in the variables panel

---
 docs/src/app.tsx                              | 57 +++++++++++++
 .../ComponentExample/ComponentExample.tsx     | 10 +--
 docs/src/index.tsx                            |  8 +-
 docs/src/routes.tsx                           | 83 ++++---------------
 4 files changed, 82 insertions(+), 76 deletions(-)
 create mode 100644 docs/src/app.tsx

diff --git a/docs/src/app.tsx b/docs/src/app.tsx
new file mode 100644
index 0000000000..ee8195fedc
--- /dev/null
+++ b/docs/src/app.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react'
+import { Provider, themes } from '@stardust-ui/react'
+
+import { mergeThemes } from '../../src/lib'
+import { semanticCssOverrides } from './Style'
+import { ThemeContext } from './context/theme-context'
+import Router from './routes'
+
+const semanticStyleOverrides = {
+  staticStyles: [semanticCssOverrides],
+}
+
+interface IAppState {
+  themeName: string
+  changeTheme: (newTheme: string) => void
+}
+
+class App extends React.Component<any, IAppState> {
+  private changeTheme
+
+  constructor(props) {
+    super(props)
+
+    this.changeTheme = newTheme => {
+      this.setState({
+        themeName: newTheme,
+      })
+    }
+
+    // State also contains the updater function so it will
+    // be passed down into the context provider
+    this.state = {
+      themeName: 'teams',
+      changeTheme: this.changeTheme,
+    }
+  }
+  render() {
+    const { themeName } = this.state
+    return (
+      <ThemeContext.Provider value={this.state}>
+        <Provider
+          theme={mergeThemes(semanticStyleOverrides, themes[themeName], {
+            // adjust Teams' theme to Semantic UI's font size scheme
+            siteVariables: {
+              htmlFontSize: '14px',
+              bodyFontSize: '1rem',
+            },
+          })}
+        >
+          <Router />
+        </Provider>
+      </ThemeContext.Provider>
+    )
+  }
+}
+
+export default App
diff --git a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
index 5bdcab6379..e7a0fa0c92 100644
--- a/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
+++ b/docs/src/components/ComponentDoc/ComponentExample/ComponentExample.tsx
@@ -553,12 +553,10 @@ class ComponentExample extends React.Component<IComponentExampleProps, IComponen
         </Divider>
         <Provider.Consumer
           render={({ siteVariables, componentVariables }: IThemePrepared) => {
-            // const mergedVariables = mergeThemeVariables(componentVariables, {
-            //   [displayName]: this.state.componentVariables,
-            // })
-            // const variables = mergedVariables[displayName]
-
-            const variables = componentVariables[displayName]
+            const mergedVariables = mergeThemeVariables(componentVariables, {
+              [displayName]: this.state.componentVariables,
+            })
+            const variables = mergedVariables[displayName]
 
             if (!variables) {
               return (
diff --git a/docs/src/index.tsx b/docs/src/index.tsx
index 589e1419a9..c3c357c85b 100644
--- a/docs/src/index.tsx
+++ b/docs/src/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as ReactDOM from 'react-dom'
 import { AppContainer } from 'react-hot-loader'
-import Router from './routes'
+import App from './app'
 
 // ----------------------------------------
 // Rendering
@@ -25,13 +25,13 @@ const render = NewApp =>
 if (__DEV__) {
   // When the application source code changes, re-render the whole thing.
   if (module.hot) {
-    module.hot.accept('./routes', () => {
+    module.hot.accept('./app', () => {
       // restore scroll
       const { scrollLeft, scrollTop } = document.scrollingElement!
       ReactDOM.unmountComponentAtNode(mountNode)
 
       try {
-        render(require('./routes').default)
+        render(require('./app').default)
         document.scrollingElement!.scrollTop = scrollTop
         document.scrollingElement!.scrollLeft = scrollLeft
       } catch (e) {
@@ -45,4 +45,4 @@ if (__DEV__) {
 // Start the app
 // ----------------------------------------
 
-render(Router)
+render(App)
diff --git a/docs/src/routes.tsx b/docs/src/routes.tsx
index 02f826bb86..32f16963e8 100644
--- a/docs/src/routes.tsx
+++ b/docs/src/routes.tsx
@@ -12,72 +12,23 @@ import Accessibility from './views/Accessibility'
 import Theming from './views/Theming'
 import ThemingExamples from './views/ThemingExamples'
 import Glossary from './views/Glossary'
-import { Provider, themes } from '@stardust-ui/react'
 
-import { mergeThemes } from '../../src/lib'
-import { semanticCssOverrides } from './Style'
-import { ThemeContext } from './context/theme-context'
-
-const semanticStyleOverrides = {
-  staticStyles: [semanticCssOverrides],
-}
-
-interface IRouterState {
-  themeName: string
-  changeTheme: (newTheme: string) => void
-}
-
-class Router extends React.Component<any, IRouterState> {
-  private changeTheme
-
-  constructor(props) {
-    super(props)
-
-    this.changeTheme = newTheme => {
-      this.setState({
-        themeName: newTheme,
-      })
-    }
-
-    // State also contains the updater function so it will
-    // be passed down into the context provider
-    this.state = {
-      themeName: 'teams',
-      changeTheme: this.changeTheme,
-    }
-  }
-  render() {
-    const { themeName } = this.state
-    return (
-      <ThemeContext.Provider value={this.state}>
-        <Provider
-          theme={mergeThemes(semanticStyleOverrides, themes[themeName], {
-            // adjust Teams' theme to Semantic UI's font size scheme
-            siteVariables: {
-              htmlFontSize: '14px',
-              bodyFontSize: '1rem',
-            },
-          })}
-        >
-          <BrowserRouter basename={__BASENAME__}>
-            <Switch>
-              <Route exact path="/maximize/:exampleName" component={ExternalExampleLayout} />
-              <Switch>
-                <DocsLayout exact path="/" component={Introduction} />
-                <DocsLayout exact path="/:type/:name" component={DocsRoot} sidebar />
-                <DocsLayout exact path="/quick-start" component={QuickStart} />
-                <DocsLayout exact path="/glossary" component={Glossary} />
-                <DocsLayout exact path="/accessibility" component={Accessibility} />
-                <DocsLayout exact path="/theming" component={Theming} />
-                <DocsLayout exact path="/theming-examples" component={ThemingExamples} />
-                <DocsLayout exact path="/*" component={PageNotFound} />
-              </Switch>
-            </Switch>
-          </BrowserRouter>
-        </Provider>
-      </ThemeContext.Provider>
-    )
-  }
-}
+const Router = () => (
+  <BrowserRouter basename={__BASENAME__}>
+    <Switch>
+      <Route exact path="/maximize/:exampleName" component={ExternalExampleLayout} />
+      <Switch>
+        <DocsLayout exact path="/" component={Introduction} />
+        <DocsLayout exact path="/:type/:name" component={DocsRoot} sidebar />
+        <DocsLayout exact path="/quick-start" component={QuickStart} />
+        <DocsLayout exact path="/glossary" component={Glossary} />
+        <DocsLayout exact path="/accessibility" component={Accessibility} />
+        <DocsLayout exact path="/theming" component={Theming} />
+        <DocsLayout exact path="/theming-examples" component={ThemingExamples} />
+        <DocsLayout exact path="/*" component={PageNotFound} />
+      </Switch>
+    </Switch>
+  </BrowserRouter>
+)
 
 export default Router