diff --git a/packages/devui/package.json b/packages/devui/package.json
index 066bd594..5154a1c6 100755
--- a/packages/devui/package.json
+++ b/packages/devui/package.json
@@ -64,7 +64,7 @@
     "codemirror": "^5.56.0",
     "color": "^3.1.2",
     "prop-types": "^15.7.2",
-    "react-icons": "^2.2.7",
+    "react-icons": "^3.10.0",
     "react-jsonschema-form": "^1.8.1",
     "react-select": "^1.3.0",
     "redux-devtools-themes": "^1.0.0",
diff --git a/packages/devui/src/Button/stories/index.js b/packages/devui/src/Button/stories/index.js
index 4835bf85..b7461c05 100755
--- a/packages/devui/src/Button/stories/index.js
+++ b/packages/devui/src/Button/stories/index.js
@@ -3,7 +3,7 @@ import styled from 'styled-components';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, text, boolean, select } from '@storybook/addon-knobs';
-import MdFiberManualRecord from 'react-icons/lib/md/fiber-manual-record';
+import { MdFiberManualRecord } from 'react-icons/md';
 import Button from '../';
 
 export const Container = styled.div`
diff --git a/packages/devui/src/Notification/Notification.js b/packages/devui/src/Notification/Notification.js
index 11a1509a..d5ac0320 100644
--- a/packages/devui/src/Notification/Notification.js
+++ b/packages/devui/src/Notification/Notification.js
@@ -1,9 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import CloseIcon from 'react-icons/lib/md/close';
-import WarningIcon from 'react-icons/lib/md/warning';
-import ErrorIcon from 'react-icons/lib/md/error';
-import SuccessIcon from 'react-icons/lib/md/check-circle';
+import { MdClose } from 'react-icons/md';
+import { MdWarning } from 'react-icons/md';
+import { MdError } from 'react-icons/md';
+import { MdCheckCircle } from 'react-icons/md';
 import createStyledComponent from '../utils/createStyledComponent';
 import styles from './styles';
 
@@ -20,11 +20,11 @@ export default class Notification extends Component {
   getIcon = () => {
     switch (this.props.type) {
       case 'warning':
-        return <WarningIcon />;
+        return <MdWarning />;
       case 'error':
-        return <ErrorIcon />;
+        return <MdError />;
       case 'success':
-        return <SuccessIcon />;
+        return <MdCheckCircle />;
       default:
         return null;
     }
@@ -37,7 +37,7 @@ export default class Notification extends Component {
         <span>{this.props.children}</span>
         {this.props.onClose && (
           <button onClick={this.props.onClose}>
-            <CloseIcon />
+            <MdClose />
           </button>
         )}
       </NotificationWrapper>
diff --git a/packages/devui/src/Tabs/TabsHeader.js b/packages/devui/src/Tabs/TabsHeader.js
index 6073e1d6..40024b81 100644
--- a/packages/devui/src/Tabs/TabsHeader.js
+++ b/packages/devui/src/Tabs/TabsHeader.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import observeResize from 'simple-element-resize-detector';
-import CollapseIcon from 'react-icons/lib/fa/angle-double-right';
+import { FaAngleDoubleRight } from 'react-icons/fa';
 import ContextMenu from '../ContextMenu';
 import createStyledComponent from '../utils/createStyledComponent';
 import * as styles from './styles';
@@ -186,7 +186,7 @@ export default class TabsHeader extends Component {
           {this.props.collapsible &&
             visibleTabs.length < this.props.items.length && (
               <button onClick={this.expandMenu} value="expandIcon">
-                <CollapseIcon />
+                <FaAngleDoubleRight />
               </button>
             )}
         </div>
diff --git a/packages/devui/src/Toolbar/stories/index.js b/packages/devui/src/Toolbar/stories/index.js
index d0d1fca6..d60b6631 100755
--- a/packages/devui/src/Toolbar/stories/index.js
+++ b/packages/devui/src/Toolbar/stories/index.js
@@ -9,10 +9,10 @@ import {
   boolean,
   select,
 } from '@storybook/addon-knobs';
-import PlayIcon from 'react-icons/lib/md/play-arrow';
-import RecordIcon from 'react-icons/lib/md/fiber-manual-record';
-import LeftIcon from 'react-icons/lib/md/keyboard-arrow-left';
-import RightIcon from 'react-icons/lib/md/keyboard-arrow-right';
+import { MdPlayArrow } from 'react-icons/md';
+import { MdFiberManualRecord } from 'react-icons/md';
+import { MdKeyboardArrowLeft } from 'react-icons/md';
+import { MdKeyboardArrowRight } from 'react-icons/md';
 import {
   Toolbar,
   Divider,
@@ -77,7 +77,7 @@ storiesOf('Toolbar', module)
           disabled={boolean('Disabled', false)}
           onClick={action('button clicked')}
         >
-          <RecordIcon />
+          <MdFiberManualRecord />
         </Button>
         <Divider />
         <Spacer />
@@ -151,7 +151,7 @@ storiesOf('Toolbar', module)
             ])}
             onClick={action('button clicked')}
           >
-            <PlayIcon />
+            <MdPlayArrow />
           </Button>
           <Slider
             value={number('value', 80)}
@@ -176,7 +176,7 @@ storiesOf('Toolbar', module)
             disabled
             onClick={action('previous state clicked')}
           >
-            <LeftIcon />
+            <MdKeyboardArrowLeft />
           </Button>
           <Button
             title="Next state"
@@ -192,7 +192,7 @@ storiesOf('Toolbar', module)
             ])}
             onClick={action('next state clicked')}
           >
-            <RightIcon />
+            <MdKeyboardArrowRight />
           </Button>
           <SegmentedControl
             values={['live', '1x']}
diff --git a/packages/redux-devtools-core/package.json b/packages/redux-devtools-core/package.json
index bba05c4d..de054c67 100644
--- a/packages/redux-devtools-core/package.json
+++ b/packages/redux-devtools-core/package.json
@@ -74,7 +74,7 @@
     "lodash": "^4.17.19",
     "nanoid": "^3.1.12",
     "prop-types": "^15.7.2",
-    "react-icons": "^2.2.7",
+    "react-icons": "^3.10.0",
     "react-redux": "^6.0.1",
     "redux": "^4.0.5",
     "redux-devtools": "^3.6.0",
diff --git a/packages/redux-devtools-core/src/app/components/BottomButtons.js b/packages/redux-devtools-core/src/app/components/BottomButtons.js
index 48b4d653..d7e0f33b 100644
--- a/packages/redux-devtools-core/src/app/components/BottomButtons.js
+++ b/packages/redux-devtools-core/src/app/components/BottomButtons.js
@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Button, Toolbar, Divider } from 'devui';
-import SaveIcon from 'react-icons/lib/md/save';
+import { MdSave } from 'react-icons/md';
 import ExportButton from './buttons/ExportButton';
 import ImportButton from './buttons/ImportButton';
 import PrintButton from './buttons/PrintButton';
@@ -30,7 +30,7 @@ export default class BottomButtons extends Component {
       <Toolbar borderPosition="top">
         {features.export && (
           <Button title="Save a report" tooltipPosition="top-right">
-            <SaveIcon />
+            <MdSave />
           </Button>
         )}
         {features.export && <ExportButton />}
diff --git a/packages/redux-devtools-core/src/app/components/Header.js b/packages/redux-devtools-core/src/app/components/Header.js
index 1ba9fba2..ff80d2b8 100644
--- a/packages/redux-devtools-core/src/app/components/Header.js
+++ b/packages/redux-devtools-core/src/app/components/Header.js
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import { Tabs, Toolbar, Button, Divider } from 'devui';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
-import DocsIcon from 'react-icons/lib/go/book';
-import FeedBackIcon from 'react-icons/lib/io/android-textsms';
-import TwitterIcon from 'react-icons/lib/ti/social-twitter';
-import SupportIcon from 'react-icons/lib/ti/heart-full-outline';
+import { GoBook } from 'react-icons/go';
+import { IoMdText } from 'react-icons/io';
+import { TiSocialTwitter } from 'react-icons/ti';
+import { TiHeartFullOutline } from 'react-icons/ti';
 import { changeSection } from '../actions';
 
 const tabs = [{ name: 'Actions' }, { name: 'Reports' }, { name: 'Settings' }];
@@ -37,7 +37,7 @@ class Header extends Component {
           tooltipPosition="bottom"
           onClick={this.openLink('http://extension.remotedev.io')}
         >
-          <DocsIcon />
+          <GoBook />
         </Button>
         <Button
           title="Feedback"
@@ -46,14 +46,14 @@ class Header extends Component {
             'http://extension.remotedev.io/docs/Feedback.html'
           )}
         >
-          <FeedBackIcon />
+          <IoMdText />
         </Button>
         <Button
           title="Follow us"
           tooltipPosition="bottom"
           onClick={this.openLink('https://twitter.com/ReduxDevTools')}
         >
-          <TwitterIcon />
+          <TiSocialTwitter />
         </Button>
         <Button
           title="Support us"
@@ -62,7 +62,7 @@ class Header extends Component {
             'https://opencollective.com/redux-devtools-extension'
           )}
         >
-          <SupportIcon />
+          <TiHeartFullOutline />
         </Button>
       </Toolbar>
     );
diff --git a/packages/redux-devtools-core/src/app/components/buttons/DispatcherButton.js b/packages/redux-devtools-core/src/app/components/buttons/DispatcherButton.js
index 810bf167..77f054ae 100644
--- a/packages/redux-devtools-core/src/app/components/buttons/DispatcherButton.js
+++ b/packages/redux-devtools-core/src/app/components/buttons/DispatcherButton.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Button } from 'devui';
-import DispatchIcon from 'react-icons/lib/fa/terminal';
+import { FaTerminal } from 'react-icons/fa';
 import { toggleDispatcher } from '../../actions';
 
 class DispatcherButton extends Component {
@@ -26,7 +26,7 @@ class DispatcherButton extends Component {
         onClick={this.props.toggleDispatcher}
         tooltipPosition="top-left"
       >
-        <DispatchIcon />
+        <FaTerminal />
       </Button>
     );
   }
diff --git a/packages/redux-devtools-core/src/app/components/buttons/ExportButton.js b/packages/redux-devtools-core/src/app/components/buttons/ExportButton.js
index 9eca98a5..92659c95 100644
--- a/packages/redux-devtools-core/src/app/components/buttons/ExportButton.js
+++ b/packages/redux-devtools-core/src/app/components/buttons/ExportButton.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Button } from 'devui';
-import DownloadIcon from 'react-icons/lib/ti/download';
+import { TiDownload } from 'react-icons/ti';
 import { exportState } from '../../actions';
 
 class ExportButton extends Component {
@@ -18,7 +18,7 @@ class ExportButton extends Component {
   render() {
     return (
       <Button title="Export to a file" onClick={this.props.exportState}>
-        <DownloadIcon />
+        <TiDownload />
       </Button>
     );
   }
diff --git a/packages/redux-devtools-core/src/app/components/buttons/ImportButton.js b/packages/redux-devtools-core/src/app/components/buttons/ImportButton.js
index c1e6761a..89cd7d70 100644
--- a/packages/redux-devtools-core/src/app/components/buttons/ImportButton.js
+++ b/packages/redux-devtools-core/src/app/components/buttons/ImportButton.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Button } from 'devui';
-import UploadIcon from 'react-icons/lib/ti/upload';
+import { TiUpload } from 'react-icons/ti';
 import { importState } from '../../actions';
 
 class ImportButton extends Component {
@@ -43,7 +43,7 @@ class ImportButton extends Component {
   render() {
     return (
       <Button title="Import from a file" onClick={this.handleImport}>
-        <UploadIcon />
+        <TiUpload />
         <input
           type="file"
           ref={this.mapRef}
diff --git a/packages/redux-devtools-core/src/app/components/buttons/LockButton.js b/packages/redux-devtools-core/src/app/components/buttons/LockButton.js
index f775d7be..7724c6e3 100644
--- a/packages/redux-devtools-core/src/app/components/buttons/LockButton.js
+++ b/packages/redux-devtools-core/src/app/components/buttons/LockButton.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Button } from 'devui';
-import LockIcon from 'react-icons/lib/io/ios-locked';
+import { IoIosLock } from 'react-icons/io';
 import { lockChanges } from '../../actions';
 
 class LockButton extends Component {
diff --git a/packages/redux-devtools-core/src/app/components/buttons/PersistButton.js b/packages/redux-devtools-core/src/app/components/buttons/PersistButton.js
index dd38e529..da1c0590 100644
--- a/packages/redux-devtools-core/src/app/components/buttons/PersistButton.js
+++ b/packages/redux-devtools-core/src/app/components/buttons/PersistButton.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import { Button } from 'devui';
-import PersistIcon from 'react-icons/lib/fa/thumb-tack';
+import { FaThumbtack } from 'react-icons/fa';
 import { togglePersist } from '../../actions';
 
 class LockButton extends Component {
@@ -31,7 +31,7 @@ class LockButton extends Component {
         }
         onClick={this.props.onClick}
       >
-        <PersistIcon />
+        <FaThumbtack />
       </Button>
     );
   }
diff --git a/packages/redux-devtools-core/src/app/components/buttons/PrintButton.js b/packages/redux-devtools-core/src/app/components/buttons/PrintButton.js
index 59de3a7e..dc55408c 100644
--- a/packages/redux-devtools-core/src/app/components/buttons/PrintButton.js
+++ b/packages/redux-devtools-core/src/app/components/buttons/PrintButton.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { Button } from 'devui';
-import PrintIcon from 'react-icons/lib/md/print';
+import { MdPrint } from 'react-icons/md';
 
 export default class PrintButton extends Component {
   shouldComponentUpdate() {
@@ -37,7 +37,7 @@ export default class PrintButton extends Component {
   render() {
     return (
       <Button title="Print" onClick={this.handlePrint}>
-        <PrintIcon />
+        <MdPrint />
       </Button>
     );
   }
diff --git a/packages/redux-devtools-core/src/app/components/buttons/RecordButton.js b/packages/redux-devtools-core/src/app/components/buttons/RecordButton.js
index 455a75fe..a6a108dc 100644
--- a/packages/redux-devtools-core/src/app/components/buttons/RecordButton.js
+++ b/packages/redux-devtools-core/src/app/components/buttons/RecordButton.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { Button } from 'devui';
-import RecordIcon from 'react-icons/lib/md/fiber-manual-record';
+import { MdFiberManualRecord } from 'react-icons/md';
 import { pauseRecording } from '../../actions';
 
 class RecordButton extends Component {
@@ -23,7 +23,7 @@ class RecordButton extends Component {
         title={this.props.paused ? 'Start recording' : 'Pause recording'}
         onClick={this.props.pauseRecording}
       >
-        <RecordIcon />
+        <MdFiberManualRecord />
       </Button>
     );
   }
diff --git a/packages/redux-devtools-core/src/app/components/buttons/SliderButton.js b/packages/redux-devtools-core/src/app/components/buttons/SliderButton.js
index 2954c9b1..21b842a6 100644
--- a/packages/redux-devtools-core/src/app/components/buttons/SliderButton.js
+++ b/packages/redux-devtools-core/src/app/components/buttons/SliderButton.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Button } from 'devui';
-import HistoryIcon from 'react-icons/lib/md/av-timer';
+import { MdAvTimer } from 'react-icons/md';
 import { toggleSlider } from '../../actions';
 
 class SliderButton extends Component {
@@ -24,7 +24,7 @@ class SliderButton extends Component {
         tooltipPosition="top-left"
         onClick={this.props.toggleSlider}
       >
-        <HistoryIcon />
+        <MdAvTimer />
       </Button>
     );
   }
diff --git a/packages/redux-devtools-core/src/app/components/buttons/SyncButton.js b/packages/redux-devtools-core/src/app/components/buttons/SyncButton.js
index 8c57ec6c..ba37a1d1 100644
--- a/packages/redux-devtools-core/src/app/components/buttons/SyncButton.js
+++ b/packages/redux-devtools-core/src/app/components/buttons/SyncButton.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { bindActionCreators } from 'redux';
 import { connect } from 'react-redux';
 import { Button } from 'devui';
-import SyncIcon from 'react-icons/lib/ti/arrow-sync';
+import { TiArrowSync } from 'react-icons/ti';
 import { toggleSync } from '../../actions';
 
 class SyncButton extends Component {
@@ -24,7 +24,7 @@ class SyncButton extends Component {
         onClick={this.props.onClick}
         mark={this.props.sync && 'base0B'}
       >
-        <SyncIcon />
+        <TiArrowSync />
       </Button>
     );
   }
diff --git a/packages/redux-devtools-test-generator/package.json b/packages/redux-devtools-test-generator/package.json
index 65a49805..b8a980a8 100644
--- a/packages/redux-devtools-test-generator/package.json
+++ b/packages/redux-devtools-test-generator/package.json
@@ -76,7 +76,7 @@
     "object-path": "^0.11.4",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
-    "react-icons": "^2.2.7",
+    "react-icons": "^3.10.0",
     "simple-diff": "^1.6.0"
   },
   "jest": {
diff --git a/packages/redux-devtools-test-generator/src/index.js b/packages/redux-devtools-test-generator/src/index.js
index fa1d0dd9..afd6bfc7 100644
--- a/packages/redux-devtools-test-generator/src/index.js
+++ b/packages/redux-devtools-test-generator/src/index.js
@@ -9,8 +9,8 @@ import {
   Dialog,
 } from 'devui';
 import { formSchema, uiSchema, defaultFormData } from './templateForm';
-import AddIcon from 'react-icons/lib/md/add';
-import EditIcon from 'react-icons/lib/md/edit';
+import { MdAdd } from 'react-icons/md';
+import { MdEdit } from 'react-icons/md';
 import TestGenerator from './TestGenerator';
 import jestTemplate from './redux/jest/template';
 import mochaTemplate from './redux/mocha/template';
@@ -119,10 +119,10 @@ export default class TestTab extends Component {
             onChange={this.handleSelectTemplate}
           />
           <Button onClick={this.editTemplate}>
-            <EditIcon />
+            <MdEdit />
           </Button>
           <Button onClick={this.addTemplate}>
-            <AddIcon />
+            <MdAdd />
           </Button>
         </Toolbar>
         {!assertion ? (
diff --git a/yarn.lock b/yarn.lock
index e520c431..b1c88547 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -13249,17 +13249,12 @@ react-hot-loader@^3.1.3:
     redbox-react "^1.3.6"
     source-map "^0.6.1"
 
-react-icon-base@2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/react-icon-base/-/react-icon-base-2.1.0.tgz#a196e33fdf1e7aaa1fda3aefbb68bdad9e82a79d"
-  integrity sha1-oZbjP98eeqof2jrvu2i9rZ6Cp50=
-
-react-icons@^2.2.7:
-  version "2.2.7"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-2.2.7.tgz#d7860826b258557510dac10680abea5ca23cf650"
-  integrity sha512-0n4lcGqzJFcIQLoQytLdJCE0DKSA9dkwEZRYoGrIDJZFvIT6Hbajx5mv9geqhqFiNjUgtxg8kPyDfjlhymbGFg==
+react-icons@^3.10.0:
+  version "3.10.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-3.10.0.tgz#6c217a2dde2e8fa8d293210023914b123f317297"
+  integrity sha512-WsQ5n1JToG9VixWilSo1bHv842Cj5aZqTGiS3Ud47myF6aK7S/IUY2+dHcBdmkQcCFRuHsJ9OMUI0kTDfjyZXQ==
   dependencies:
-    react-icon-base "2.1.0"
+    camelcase "^5.0.0"
 
 react-input-autosize@^2.1.2:
   version "2.2.2"