diff --git a/package-lock.json b/package-lock.json
index 4dbadb11..09f1313b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@bufferapp/ui-template",
-  "version": "5.48.2",
+  "version": "5.48.2-beta.df91dcb",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index b1ceecd3..781011d5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@bufferapp/ui-template",
-  "version": "5.48.2",
+  "version": "5.48.2-beta.df91dcb",
+  "sideEffects": false,
   "engines": {
     "node": ">=4.0.0"
   },
@@ -148,9 +149,9 @@
     "predeploy:docs": "npm run gen:docs && npm run build:docs",
     "deploy:docs": "gh-pages -d build",
     "prebuild:lib": "rimraf lib",
-    "build:lib": "npm-run-all --parallel build:commonjs build:copy-files",
+    "build:lib": "npm-run-all --parallel build:esm build:copy-files",
     "build:copy-files": "node scripts/copyBuildFiles.js",
-    "build:commonjs": "cross-env NODE_ENV=production babel ./src/components --out-dir ./lib --ignore index.js",
+    "build:esm": "cross-env NODE_ENV=production babel ./src/components --out-dir ./lib --ignore index.js",
     "publish": "./scripts/publish.sh",
     "beta:publish": "node ./scripts/betaPublish.js",
     "component:new": "node ./scripts/newComponent.js",
@@ -187,12 +188,18 @@
   },
   "babel": {
     "plugins": [
-      "@babel/plugin-transform-modules-commonjs",
       "@babel/plugin-proposal-class-properties",
       "@babel/plugin-proposal-export-default-from"
     ],
     "presets": [
-      "@babel/preset-env",
+      [
+        "@babel/preset-env",
+        {
+          "targets": {
+            "esmodules": true
+          }
+        }
+      ],
       "@babel/react"
     ]
   },
diff --git a/src/components/Avatar/Avatar.jsx b/src/components/Avatar/Avatar.jsx
index 076e166d..8a8c09d2 100644
--- a/src/components/Avatar/Avatar.jsx
+++ b/src/components/Avatar/Avatar.jsx
@@ -6,7 +6,12 @@ import styled from 'styled-components';
 import * as Styles from './style';
 // import { socialNetworks } from '../constants';
 import { facebook, googleplus, instagram, linkedin, pinterest, twitter } from '../style/colors';
-import { Instagram, Facebook, Twitter, LinkedIn, Pinterest, GooglePlus } from '../Icon';
+import Instagram from '../Icon/Icons/Instagram'
+import Facebook from '../Icon/Icons/Facebook'
+import Twitter from '../Icon/Icons/Twitter'
+import LinkedIn from '../Icon/Icons/LinkedIn'
+import Pinterest from '../Icon/Icons/Pinterest'
+import GooglePlus from '../Icon/Icons/GooglePlus'
 
 const Wrapper = styled.div`
   ${props => Styles.wrapper[props.size]}
diff --git a/src/components/DropdownMenu/ButtonItem/ButtonItem.jsx b/src/components/DropdownMenu/ButtonItem/ButtonItem.jsx
index f60f2e41..f04aa73f 100644
--- a/src/components/DropdownMenu/ButtonItem/ButtonItem.jsx
+++ b/src/components/DropdownMenu/ButtonItem/ButtonItem.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ButtonItemStyled, ButtonLabel } from '../style';
-import { Checkmark as CheckmarkIcon } from '../../Icon';
+import CheckmarkIcon from '../../Icon/Icons/Checkmark'
 import { green } from '../../style/colors';
 import { keyCode } from '../keyCode';
 
diff --git a/src/components/Input/Input.jsx b/src/components/Input/Input.jsx
index 35820158..5ebef33b 100644
--- a/src/components/Input/Input.jsx
+++ b/src/components/Input/Input.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 import PropTypes from 'prop-types';
 import * as Styles from './style';
-import { Warning } from '../Icon';
+import Warning from '../Icon/Icons/Warning';
 import Text from '../Text';
 
 export default class Input extends React.Component {
diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
index 5ff39c96..536b57e4 100644
--- a/src/components/Modal/Modal.jsx
+++ b/src/components/Modal/Modal.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import * as Styles from './style';
 import Button from '../Button';
-import { Cross } from '../Icon';
+import Cross from '../Icon/Icons/Cross';
 
 function setCookie(cookie, cookieKey, days, value) {
   const expiresInDays = days * 24 * 60 * 60;
diff --git a/src/components/NavBar/NavBar.jsx b/src/components/NavBar/NavBar.jsx
index 90fa3d5b..4f0acc68 100644
--- a/src/components/NavBar/NavBar.jsx
+++ b/src/components/NavBar/NavBar.jsx
@@ -1,17 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import {
-  Cross,
-  Info as InfoIcon,
-  ArrowLeft,
-  Person as PersonIcon,
-  Instagram as InstagramIcon,
-  Twitter as TwitterIcon,
-  Facebook as FacebookIcon,
-  Pinterest as PinterestIcon,
-  LinkedIn as LinkedInIcon,
-} from '../Icon';
+import Cross from '../Icon/Icons/Cross'
+import InfoIcon from '../Icon/Icons/Info'
+import ArrowLeft from '../Icon/Icons/ArrowLeft'
+import PersonIcon from '../Icon/Icons/Person'
+import InstagramIcon from '../Icon/Icons/Instagram'
+import TwitterIcon from '../Icon/Icons/Twitter'
+import FacebookIcon from '../Icon/Icons/Facebook'
+import PinterestIcon from '../Icon/Icons/Pinterest'
+import LinkedInIcon from '../Icon/Icons/LinkedIn'
 
 import {
   gray,
@@ -195,7 +193,7 @@ export function appendOrgSwitcher(orgSwitcher) {
     if (!item.subItems || item.subItems.length === 0) {
       item.defaultTooltipMessage = 'No social accounts connected yet.';
     }
-    
+
     return item;
   });
 }
diff --git a/src/components/NavBar/NavBarMenu/NavBarMenu.jsx b/src/components/NavBar/NavBarMenu/NavBarMenu.jsx
index 59fcc578..1b55603e 100644
--- a/src/components/NavBar/NavBarMenu/NavBarMenu.jsx
+++ b/src/components/NavBar/NavBarMenu/NavBarMenu.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ChevronDown } from '../../Icon';
+import ChevronDown from '../../Icon/Icons/ChevronDown';
 import {
   NavBarStyled,
   NavBarEmail,
diff --git a/src/components/Select/SelectItem/SelectItem.jsx b/src/components/Select/SelectItem/SelectItem.jsx
index 97d04e7a..7bc9b3b7 100644
--- a/src/components/Select/SelectItem/SelectItem.jsx
+++ b/src/components/Select/SelectItem/SelectItem.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Checkmark } from '../../Icon';
+import Checkmark from '../../Icon/Icons/Checkmark'
 import {
   SelectItemStyled,
   SelectItemLabel,
diff --git a/src/components/SocialButton/SocialButton.jsx b/src/components/SocialButton/SocialButton.jsx
index b27091f4..6f04c6f9 100644
--- a/src/components/SocialButton/SocialButton.jsx
+++ b/src/components/SocialButton/SocialButton.jsx
@@ -1,6 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Twitter, Instagram, Facebook, Pinterest, LinkedIn } from '../Icon';
+import Instagram from '../Icon/Icons/Instagram'
+import Facebook from '../Icon/Icons/Facebook'
+import Twitter from '../Icon/Icons/Twitter'
+import LinkedIn from '../Icon/Icons/LinkedIn'
+import Pinterest from '../Icon/Icons/Pinterest'
 import Text from '../Text/Text';
 
 import {
diff --git a/src/components/TextArea/TextArea.jsx b/src/components/TextArea/TextArea.jsx
index 6ec7452b..e5e27a02 100644
--- a/src/components/TextArea/TextArea.jsx
+++ b/src/components/TextArea/TextArea.jsx
@@ -2,23 +2,23 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Text from '../Text';
 import {HelpTextWrapper, HelpText} from '../Input/style';
-import { Warning } from '../Icon';
+import Warning from '../Icon/Icons/Warning';
 import {Container, StyledTextArea} from './style';
 
 export default class TextArea extends React.Component {
   render() {
     const {
-      value, 
-      label, 
-      hasError, 
-      help, 
-      disabled, 
-      rows, 
-      onChange, 
-      id, 
+      value,
+      label,
+      hasError,
+      help,
+      disabled,
+      rows,
+      onChange,
+      id,
       fullHeight,
-      forwardRef, 
-      ...props 
+      forwardRef,
+      ...props
     } = this.props;
     return (
       <Container>
@@ -69,12 +69,12 @@ TextArea.propTypes = {
   id: PropTypes.string.isRequired,
   /** If the textarea should take the height of the parent div */
   fullHeight: PropTypes.bool,
-  /** 
+  /**
    * this consumed by the default export that is wrapping the component into a ForwardRef
    * @ignore
    */
   forwardRef: PropTypes.oneOfType([
-    PropTypes.func, 
+    PropTypes.func,
     PropTypes.shape({ current: PropTypes.instanceOf(Element) })
   ]),
 };
@@ -86,4 +86,4 @@ TextArea.defaultProps = {
   rows: 4,
   fullHeight: false,
   forwardRef: undefined,
-}
\ No newline at end of file
+}
diff --git a/src/documentation/app/layout/sidebar/Sidebar.jsx b/src/documentation/app/layout/sidebar/Sidebar.jsx
index feda9bb4..6a5bd4bf 100644
--- a/src/documentation/app/layout/sidebar/Sidebar.jsx
+++ b/src/documentation/app/layout/sidebar/Sidebar.jsx
@@ -3,7 +3,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
-import { ChevronDown, ChevronUp } from '@bufferapp/ui/Icon';
+import ChevronDown from '@bufferapp/ui/Icon/Icons/ChevronDown';
+import ChevronUp from '@bufferapp/ui/Icon/Icons/ChevronUp';
 import helper from 'immutability-helper';
 
 const SidebarWrapper = styled.div`
diff --git a/src/documentation/examples/AppShell/AppShell.jsx b/src/documentation/examples/AppShell/AppShell.jsx
index ed122b80..7dc54ebb 100644
--- a/src/documentation/examples/AppShell/AppShell.jsx
+++ b/src/documentation/examples/AppShell/AppShell.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import AppShell from '@bufferapp/ui/AppShell';
-import { Gear } from '@bufferapp/ui/Icon';
+import Gear from '@bufferapp/ui/Icon/Icons/Gear';
 
 import { gray } from '@bufferapp/ui/style/colors';
 
diff --git a/src/documentation/examples/AppShell/WithEngageEnabled.jsx b/src/documentation/examples/AppShell/WithEngageEnabled.jsx
index 66c0cc70..4a2afed2 100644
--- a/src/documentation/examples/AppShell/WithEngageEnabled.jsx
+++ b/src/documentation/examples/AppShell/WithEngageEnabled.jsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import AppShell from '@bufferapp/ui/AppShell';
-import {
-  Gear,
-} from '@bufferapp/ui/Icon';
+import Gear from '@bufferapp/ui/Icon/Icons/Gear';
 
 import { gray } from '@bufferapp/ui/style/colors';
 
diff --git a/src/documentation/examples/AppShell/WithImpersonationSession.jsx b/src/documentation/examples/AppShell/WithImpersonationSession.jsx
index d225fc22..c812f2a2 100644
--- a/src/documentation/examples/AppShell/WithImpersonationSession.jsx
+++ b/src/documentation/examples/AppShell/WithImpersonationSession.jsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import AppShell from '@bufferapp/ui/AppShell';
-import {
-  Gear,
-} from '@bufferapp/ui/Icon';
+import Gear from '@bufferapp/ui/Icon/Icons/Gear';
 
 import { gray } from '@bufferapp/ui/style/colors';
 
diff --git a/src/documentation/examples/AppShell/WithOrgSwitcher.jsx b/src/documentation/examples/AppShell/WithOrgSwitcher.jsx
index 6e000d09..99537b11 100644
--- a/src/documentation/examples/AppShell/WithOrgSwitcher.jsx
+++ b/src/documentation/examples/AppShell/WithOrgSwitcher.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import AppShell from '@bufferapp/ui/AppShell';
-import { Gear } from '@bufferapp/ui/Icon';
+import Gear from '@bufferapp/ui/Icon/Icons/Gear';
 
 import { gray } from '@bufferapp/ui/style/colors';
 
diff --git a/src/documentation/examples/Button/Type/TypeIcon.jsx b/src/documentation/examples/Button/Type/TypeIcon.jsx
index e51a3b56..2d321347 100644
--- a/src/documentation/examples/Button/Type/TypeIcon.jsx
+++ b/src/documentation/examples/Button/Type/TypeIcon.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@bufferapp/ui/Button';
-import { Folder } from '@bufferapp/ui/Icon';
+import Folder from '@bufferapp/ui/Icon/Icons/Folder';
 
 /** Secondary Icon */
 export default function ExampleButton() {
diff --git a/src/documentation/examples/Button/Type/TypeIconEnd.jsx b/src/documentation/examples/Button/Type/TypeIconEnd.jsx
index b60a36c3..b019e931 100644
--- a/src/documentation/examples/Button/Type/TypeIconEnd.jsx
+++ b/src/documentation/examples/Button/Type/TypeIconEnd.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@bufferapp/ui/Button';
-import { Folder } from '@bufferapp/ui/Icon';
+import Folder from '@bufferapp/ui/Icon/Icons/Folder';
 
 /** Secondary with Icon at End */
 export default function ExampleButton() {
diff --git a/src/documentation/examples/Button/Type/TypePrimaryIcon.jsx b/src/documentation/examples/Button/Type/TypePrimaryIcon.jsx
index 08149476..3613c078 100644
--- a/src/documentation/examples/Button/Type/TypePrimaryIcon.jsx
+++ b/src/documentation/examples/Button/Type/TypePrimaryIcon.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@bufferapp/ui/Button';
-import { Message } from '@bufferapp/ui/Icon';
+import Message from '@bufferapp/ui/Icon/Icons/Message';
 
 /** Primary with Icon */
 export default function ExampleButton() {
diff --git a/src/documentation/examples/Button/Type/TypePrimaryIconEnd.jsx b/src/documentation/examples/Button/Type/TypePrimaryIconEnd.jsx
index 30e7adf0..5cff01c2 100644
--- a/src/documentation/examples/Button/Type/TypePrimaryIconEnd.jsx
+++ b/src/documentation/examples/Button/Type/TypePrimaryIconEnd.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@bufferapp/ui/Button';
-import { Message } from '@bufferapp/ui/Icon';
+import Message from '@bufferapp/ui/Icon/Icons/Message';
 
 /** Primary with Icon */
 export default function ExampleButton() {
diff --git a/src/documentation/examples/Button/Type/TypeSecondaryIcon.jsx b/src/documentation/examples/Button/Type/TypeSecondaryIcon.jsx
index 7f014d5f..a7e2f985 100644
--- a/src/documentation/examples/Button/Type/TypeSecondaryIcon.jsx
+++ b/src/documentation/examples/Button/Type/TypeSecondaryIcon.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Button from '@bufferapp/ui/Button';
-import { Folder } from '@bufferapp/ui/Icon';
+import Folder from '@bufferapp/ui/Icon/Icons/Folder';
 
 /** Secondary with Icon */
 export default function ExampleButton() {
diff --git a/src/documentation/examples/Select/SelectWithIcon.jsx b/src/documentation/examples/Select/SelectWithIcon.jsx
index a0ce0d5a..746587cc 100644
--- a/src/documentation/examples/Select/SelectWithIcon.jsx
+++ b/src/documentation/examples/Select/SelectWithIcon.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import Select from '@bufferapp/ui/Select';
-import { Person } from '@bufferapp/ui/Icon';
-
+import Person from '@bufferapp/ui/Icon/Icons/Person';
 
 /** With Icon */
 export default function ExampleSelect() {
diff --git a/src/documentation/examples/Select/SelectWithInputSearch.jsx b/src/documentation/examples/Select/SelectWithInputSearch.jsx
index 075741f6..bca5f149 100644
--- a/src/documentation/examples/Select/SelectWithInputSearch.jsx
+++ b/src/documentation/examples/Select/SelectWithInputSearch.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import Select from '@bufferapp/ui/Select';
 import Search from '@bufferapp/ui/Search';
-import { Search as SearchIcon } from '@bufferapp/ui/Icon';
+import SearchIcon from '@bufferapp/ui/Icon/Icons/Search';
 
 const searchBarWrapperStyle = {
   width: '100%',
diff --git a/src/documentation/examples/Select/SelectWithMenuAndCustomItem.jsx b/src/documentation/examples/Select/SelectWithMenuAndCustomItem.jsx
index dc2c2594..d1253a28 100644
--- a/src/documentation/examples/Select/SelectWithMenuAndCustomItem.jsx
+++ b/src/documentation/examples/Select/SelectWithMenuAndCustomItem.jsx
@@ -1,6 +1,9 @@
 import React from 'react';
 import Select from '@bufferapp/ui/Select';
-import { Person, People, Gear, ArrowLeft } from '@bufferapp/ui/Icon';
+import Person from '@bufferapp/ui/Icon/Icons/Person'
+import People from '@bufferapp/ui/Icon/Icons/People'
+import Gear from '@bufferapp/ui/Icon/Icons/Gear'
+import ArrowLeft from '@bufferapp/ui/Icon/Icons/ArrowLeft'
 import { NavBarMenu } from '@bufferapp/ui/NavBar';
 
 /** With Custom Component and Custom Items */
diff --git a/src/documentation/examples/Select/SelectWithSearch.jsx b/src/documentation/examples/Select/SelectWithSearch.jsx
index 6d002752..097ff7a9 100644
--- a/src/documentation/examples/Select/SelectWithSearch.jsx
+++ b/src/documentation/examples/Select/SelectWithSearch.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import Select from '@bufferapp/ui/Select';
-import { Flag } from '@bufferapp/ui/Icon';
+import Flag from '@bufferapp/ui/Icon/Icons/Flag';
 
 /** With Search */
 export default function ExampleSelectWithSearch() {
diff --git a/src/documentation/examples/SidebarListItem/SidebarListItem.jsx b/src/documentation/examples/SidebarListItem/SidebarListItem.jsx
index 1db278a2..28ccb61a 100644
--- a/src/documentation/examples/SidebarListItem/SidebarListItem.jsx
+++ b/src/documentation/examples/SidebarListItem/SidebarListItem.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import SidebarListItem from '@bufferapp/ui/SidebarListItem';
-import { Person } from '@bufferapp/ui/Icon';
+import Person from '@bufferapp/ui/Icon/Icons/Person';
 
 /** SidebarListItem Example */
 export default function ExampleSidebarListItem() {
diff --git a/src/documentation/examples/SidebarListItem/SidebarListItemSelected.jsx b/src/documentation/examples/SidebarListItem/SidebarListItemSelected.jsx
index 2955ab87..81bfc366 100644
--- a/src/documentation/examples/SidebarListItem/SidebarListItemSelected.jsx
+++ b/src/documentation/examples/SidebarListItem/SidebarListItemSelected.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import SidebarListItem from '@bufferapp/ui/SidebarListItem';
-import { Person } from '@bufferapp/ui/Icon';
+import Person from '@bufferapp/ui/Icon/Icons/Person';
 
 /** SidebarListItem Selected Example */
 export default function ExampleSidebarListItem() {
diff --git a/src/documentation/examples/SidebarListItem/SidebarListItemWithIcon.jsx b/src/documentation/examples/SidebarListItem/SidebarListItemWithIcon.jsx
index a086492a..33c47896 100644
--- a/src/documentation/examples/SidebarListItem/SidebarListItemWithIcon.jsx
+++ b/src/documentation/examples/SidebarListItem/SidebarListItemWithIcon.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import SidebarListItem from '@bufferapp/ui/SidebarListItem';
-import { Warning } from '@bufferapp/ui/Icon';
+import Warning from '@bufferapp/ui/Icon/Icons/Warning'
 
 /** SidebarListItem With Badge Icon Example */
 export default function ExampleSidebarListItem() {