diff --git a/app/extensions/brave/img/tabs/close_btn.svg b/app/extensions/brave/img/tabs/close_btn.svg
deleted file mode 100644
index 926636ea455..00000000000
--- a/app/extensions/brave/img/tabs/close_btn.svg
+++ /dev/null
@@ -1 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?><svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"><style type="text/css">.st0{fill:#FD4F01;}.st1{fill:none;stroke:#E6E6E6;stroke-width:1.29;stroke-linecap:round;stroke-linejoin:round;}</style><g id="Layer_2"><g id="Layer_1_copy"><g><path class="st0" d="M2,0h12c1.1,0,2,0.9,2,2v12c0,1.1-0.9,2-2,2H2c-1.1,0-2-0.9-2-2V2C0,0.9,0.9,0,2,0z"/></g><line class="st1" x1="11.5" y1="4.5" x2="4.5" y2="11.5"/><line class="st1" x1="11.5" y1="11.5" x2="4.5" y2="4.5"/></g></g></svg>
diff --git a/app/renderer/components/styles/theme.js b/app/renderer/components/styles/theme.js
index 37055c5cb7c..01d5496a469 100644
--- a/app/renderer/components/styles/theme.js
+++ b/app/renderer/components/styles/theme.js
@@ -146,6 +146,18 @@
       borderWidth: 1,
       color: '#333',
 
+      closeButton: {
+        background: 'transparent',
+        borderRadius: '2px',
+        active: {
+          background: '#cb2c00'
+        },
+        hover: {
+          color: 'white',
+          background: '#fd4f01'
+        }
+      },
+
       hover: {
         background: '#dbdddf',
         active: {
diff --git a/app/renderer/components/tabs/content/closeTabIcon.js b/app/renderer/components/tabs/content/closeTabIcon.js
index a2e5558ee3e..d216e4596d9 100644
--- a/app/renderer/components/tabs/content/closeTabIcon.js
+++ b/app/renderer/components/tabs/content/closeTabIcon.js
@@ -4,11 +4,10 @@
 
 const React = require('react')
 const ReactDOM = require('react-dom')
-const {StyleSheet} = require('aphrodite/no-important')
+const {StyleSheet, css} = require('aphrodite/no-important')
 
 // Components
 const ReduxComponent = require('../../reduxComponent')
-const TabIcon = require('./tabIcon')
 
 // State helpers
 const tabState = require('../../../../common/state/tabState')
@@ -21,8 +20,6 @@ const globalStyles = require('../../styles/global')
 const {theme} = require('../../styles/theme')
 const {opacityIncreaseElementKeyframes} = require('../../styles/animations')
 
-const closeTabSvg = require('../../../../extensions/brave/img/tabs/close_btn.svg')
-
 class CloseTabIcon extends React.Component {
   constructor (props) {
     super(props)
@@ -85,53 +82,78 @@ class CloseTabIcon extends React.Component {
   }
 
   render () {
-    if (this.props.isPinned || !this.props.showCloseIcon) {
+    if (this.props.isPinned || !this.props.showCloseIcon) { // <-- comment out to always show, in order to view in inspector
       return null
     }
 
-    return <TabIcon
+    return <div
       data-test-id='closeTabIcon'
       data-test2-id={this.props.showCloseIcon ? 'close-icon-on' : 'close-icon-off'}
-      className={[
-        styles.icon_close,
-        this.props.centralizeTabIcons && styles.icon_close_centered
-      ]}
-      l10nId='closeTabButton'
+      className={css(
+        styles.closeIcon,
+        this.props.centralizeTabIcons && styles.closeIcon_centered
+      )}
+      data-l10n-id='closeTabButton'
       onClick={this.props.onClick}
       onDragStart={this.onDragStart}
       draggable='true'
       ref={this.setRef}
-    />
+    >
+      <svg className={css(styles.closeIcon__graphic)} xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>
+        <path className={css(styles.closeIcon__line)} fill='none' stroke='#000' strokeLinecap='round' strokeLinejoin='round' strokeWidth='1.29' d='M11.5 4.5l-7 7m7 0l-7-7' />
+      </svg>
+    </div>
   }
 }
 
 const styles = StyleSheet.create({
-  icon_close: {
+  closeIcon: {
+    '--close-line-color': 'var(--tab-color)',
+    '--close-transit-duration': theme.tab.transitionDurationOut,
+    '--close-transit-timing': theme.tab.transitionEasingOut,
+    boxSizing: 'border-box',
+    alignSelf: 'center',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: theme.tab.closeButton.borderRadius,
+    background: theme.tab.closeButton.background,
+    transition: 'background var(--close-transit-duration) var(--close-transit-timing)',
     marginRight: globalStyles.spacing.defaultTabMargin,
     marginBottom: 'var(--tab-contents-shim-bottom)',
-    backgroundImage: `url(${closeTabSvg})`,
-
-    // Override default properties
-    backgroundSize: globalStyles.spacing.closeIconSize,
     width: globalStyles.spacing.closeIconSize,
     height: globalStyles.spacing.closeIconSize,
-
-    // mask icon to gray to avoid calling another icon on hover
-    transition: 'filter 120ms ease',
-    filter: theme.tab.icon.close.filter,
-
+    zIndex: globalStyles.zindex.zindexTabsThumbnail,
     ':hover': {
-      filter: 'none'
+      '--close-line-color': theme.tab.closeButton.hover.color,
+      background: theme.tab.closeButton.hover.background,
+      '--close-transit-duration': theme.tab.transitionDurationIn,
+      '--close-transit-timing': theme.tab.transitionEasingIn
+    },
+    ':active': {
+      background: theme.tab.closeButton.active.background,
+      '--close-transit-duration': theme.tab.transitionDurationIn,
+      '--close-transit-timing': theme.tab.transitionEasingIn
     }
   },
 
-  icon_close_centered: {
+  closeIcon__graphic: {
+    flex: 1
+  },
+
+  closeIcon__line: {
+    transition: 'stroke var(--close-transit-duration) var(--close-transit-timing)',
+    stroke: 'var(--close-line-color)'
+  },
+
+  closeIcon_centered: {
     position: 'absolute',
-    left: 0,
+    left: `calc(50% - (${globalStyles.spacing.closeIconSize} / 2))`,
     right: 0,
-    top: 0,
+    top: `calc(50% - (${globalStyles.spacing.closeIconSize} / 2))`,
     bottom: 0,
-    margin: 'auto'
+    margin: 0
   }
 })
 
diff --git a/test/unit/app/renderer/components/tabs/content/closeTabIconTest.js b/test/unit/app/renderer/components/tabs/content/closeTabIconTest.js
index 76388f87a67..4c091b8b97c 100644
--- a/test/unit/app/renderer/components/tabs/content/closeTabIconTest.js
+++ b/test/unit/app/renderer/components/tabs/content/closeTabIconTest.js
@@ -64,7 +64,6 @@ describe('Tabs content - CloseTabIcon', function () {
       useCleanCache: true
     })
     mockery.registerMock('electron', fakeElectron)
-    mockery.registerMock('../../../../extensions/brave/img/tabs/close_btn.svg')
     windowStore = require('../../../../../../../js/stores/windowStore')
     appStore = require('../../../../../../../js/stores/appStoreRenderer')
     CloseTabIcon = require('../../../../../../../app/renderer/components/tabs/content/closeTabIcon')