diff --git a/app/renderer/components/navigation/urlBar.js b/app/renderer/components/navigation/urlBar.js
index 913e3300e81..97614c096c4 100644
--- a/app/renderer/components/navigation/urlBar.js
+++ b/app/renderer/components/navigation/urlBar.js
@@ -490,10 +490,7 @@ class UrlBar extends React.Component {
       })}
       action='#'
       id='urlbar'>
-      <div className={cx({
-        urlbarIconContainer: true,
-        [css(commonStyles.navigator__urlbarForm__urlbarIconContainer)]: true
-      })}>
+      <div className={css(commonStyles.navigator__urlbarForm__urlbarIconContainer)}>
         <UrlBarIcon
           titleMode={this.props.titleMode}
         />
diff --git a/app/renderer/components/navigation/urlBarIcon.js b/app/renderer/components/navigation/urlBarIcon.js
index 1fd6fcaaaca..a947e97b09b 100644
--- a/app/renderer/components/navigation/urlBarIcon.js
+++ b/app/renderer/components/navigation/urlBarIcon.js
@@ -25,6 +25,9 @@ const frameStateUtil = require('../../../../js/state/frameStateUtil')
 const {isSourceAboutUrl} = require('../../../../js/lib/appUrlUtil')
 const {isPotentialPhishingUrl} = require('../../../../js/lib/urlutil')
 
+const {StyleSheet, css} = require('aphrodite/no-important')
+const globalStyles = require('../styles/global')
+
 const searchIconSize = 16
 
 class UrlBarIcon extends React.Component {
@@ -34,26 +37,6 @@ class UrlBarIcon extends React.Component {
     this.onDragStart = this.onDragStart.bind(this)
   }
 
-  get iconCssClasses () {
-    if (this.props.isPotentialPhishingUrl) {
-      return ['fa-exclamation-triangle', 'insecure-color']
-    } else if (this.isSearch) {
-      return ['fa-search']
-    } else if (this.props.isAboutPage && !this.props.titleMode) {
-      return ['fa-list']
-    } else if (this.props.isHTTPPage && !this.props.active) {
-      if (this.props.isSecure === true) {
-        return ['fa-lock']
-      } else if (this.props.isSecure === false || this.props.isSecure === 2) {
-        return ['fa-unlock', 'insecure-color']
-      } else if (this.props.isSecure === 1) {
-        return ['fa-unlock']
-      }
-    }
-
-    return []
-  }
-
   /**
    * search icon:
    * - does not show when in title mode
@@ -62,29 +45,54 @@ class UrlBarIcon extends React.Component {
    */
   get isSearch () {
     const showSearch = this.props.isSearching && !this.props.titleMode
-
     const defaultToSearch = (!this.props.isHTTPPage || this.props.active) &&
                             !this.props.titleMode &&
                             !this.props.isAboutPage
-
     return showSearch || defaultToSearch
   }
 
+  get isAboutPage () {
+    return isSourceAboutUrl(this.props.location) &&
+      this.props.location !== 'about:newtab'
+  }
+
+  get iconCssClasses () {
+    if (isPotentialPhishingUrl(this.props.location)) {
+      return [globalStyles.appIcons.exclamationTriangle, css(styles.urlbarIcon_large, styles.urlbarIcon_siteInsecureColor)]
+    } else if (this.isSearch) {
+      return [globalStyles.appIcons.search]
+    } else if (this.isAboutPage && !this.props.titleMode) {
+      return [globalStyles.appIcons.list]
+    } else if (this.props.isHTTPPage && !this.props.active) {
+      // NOTE: EV style not approved yet; see discussion at https://github.com/brave/browser-laptop/issues/791
+      if (this.props.isSecure === true) {
+        return [globalStyles.appIcons.lock, css(styles.urlbarIcon_large)]
+      } else if (this.props.isSecure === false || this.props.isSecure === 2) {
+        return [globalStyles.appIcons.unlock, css(styles.urlbarIcon_large, styles.urlbarIcon_siteInsecureColor)]
+      } else if (this.props.isSecure === 1) {
+        return [globalStyles.appIcons.unlock, css(styles.urlbarIcon_large)]
+      }
+    }
+    return []
+  }
+
   get iconClasses () {
     if (this.props.activateSearchEngine) {
-      return cx({
-        urlbarIcon: true
-      })
+      return null
     }
 
+    // Move fa-list (not fa-search) icon on about pages 1px down
+    // ref: urlbarIcon_relative
+    const relativeIcon = this.isAboutPage && !this.isSearch
+
     const iconClasses = {
-      urlbarIcon: true,
-      fa: true
+      [css(styles.urlbarIcon, this.props.titleMode && styles.urlbarIcon_titleMode, this.isSearch && styles.urlbarIcon_isSearch, relativeIcon && styles.urlbarIcon_relative)]: true
     }
 
     this.iconCssClasses.forEach((iconClass) => {
       iconClasses[iconClass] = true
     })
+
     return cx(iconClasses)
   }
 
@@ -97,7 +105,8 @@ class UrlBarIcon extends React.Component {
       backgroundImage: `url(${this.props.searchSelectImage})`,
       backgroundSize: searchIconSize,
       width: searchIconSize,
-      height: searchIconSize
+      height: searchIconSize,
+      WebkitAppRegion: 'no-drag'
     }
   }
 
@@ -148,6 +157,7 @@ class UrlBarIcon extends React.Component {
   render () {
     // allow click and drag (unless tab is showing a message box)
     const props = {}
+
     if (!this.props.activeTabShowingMessageBox) {
       props.draggable = true
       props.onClick = this.onClick
@@ -155,11 +165,59 @@ class UrlBarIcon extends React.Component {
     }
 
     return <span
-      data-test-id='urlBarIcon'
+      data-test-id='urlbarIcon'
       {...props}
       className={this.iconClasses}
       style={this.iconStyles} />
   }
 }
 
+const styles = StyleSheet.create({
+
+  // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L893-L896
+  urlbarIcon: {
+    color: globalStyles.color.siteSecureColor,
+    fontSize: '12px',
+    backgroundRepeat: 'no-repeat',
+    backgroundPosition: 'center',
+
+    // Disable window dragging so that dragging the favicon is possible.
+    // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L704-L707
+    WebkitAppRegion: 'no-drag'
+  },
+
+  // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L801-L805
+  urlbarIcon_titleMode: {
+    display: 'inline-block',
+    opacity: 0.5,
+    minWidth: 0
+  },
+
+  // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L900-L906
+  // about:newtab
+  urlbarIcon_isSearch: {
+
+    // 50% of #5a5a5a
+    color: 'rgba(90, 90, 90, .5)'
+  },
+
+  // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L908-L913
+  urlbarIcon_large: {
+
+    // Refactor iconClasses to remove !important
+    fontSize: '16px !important'
+  },
+
+  // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L897-L898
+  urlbarIcon_relative: {
+    position: 'relative',
+    bottom: '-1px'
+  },
+
+  // ref: https://github.com/brave/browser-laptop/blob/b161b37cf5e9f59be64855ebbc5d04816bfc537b/less/navigationBar.less#L915-L917
+  urlbarIcon_siteInsecureColor: {
+    color: globalStyles.color.siteInsecureColor
+  }
+})
+
 module.exports = ReduxComponent.connect(UrlBarIcon)
diff --git a/app/renderer/components/styles/global.js b/app/renderer/components/styles/global.js
index b9ea2325f16..811a556d909 100644
--- a/app/renderer/components/styles/global.js
+++ b/app/renderer/components/styles/global.js
@@ -225,6 +225,7 @@ const globalStyles = {
     flyoutDialog: '13px',
     prefsPanelHeading: '23px'
   },
+
   appIcons: {
     clipboard: 'fa fa-clipboard',
     closeTab: 'fa fa-times-circle',
@@ -240,8 +241,14 @@ const globalStyles = {
     moreInfo: 'fa fa-info-circle',
     angleDoubleRight: 'fa fa-angle-double-right',
     findPrev: 'fa fa-caret-up',
-    findNext: 'fa fa-caret-down'
+    findNext: 'fa fa-caret-down',
+    exclamationTriangle: 'fa fa-exclamation-triangle',
+    search: 'fa fa-search',
+    list: 'fa fa-list',
+    lock: 'fa fa-lock',
+    unlock: 'fa fa-unlock'
   },
+
   animations: {
     subtleShowUp: {
       opacity: 0,
diff --git a/less/navigationBar.less b/less/navigationBar.less
index f8185c84814..fa5defc6b95 100644
--- a/less/navigationBar.less
+++ b/less/navigationBar.less
@@ -599,14 +599,6 @@
     -webkit-app-region: no-drag;
   }
 
-  form {
-    -webkit-app-region: drag;
-    // Disable window dragging so that selecting text and dragging the favicon is possible.
-    input, .urlbarIcon {
-      -webkit-app-region: no-drag;
-    }
-  }
-
   &:not(.titleMode) {
     > * {
       animation: fadeIn .6s;
@@ -629,17 +621,6 @@
     // border-radius: @borderRadiusURL;
     // box-shadow: inset 0 0 0 1px rgba(187, 187, 187, 1.0);
 
-    .urlbarIcon {
-      display: inline-block;
-      opacity: 0.5;
-      min-width: 0;
-
-      &.insecure-color {
-        color: @siteInsecureColor;
-        opacity: 1.0;
-      }
-    }
-
     .bookmarkButton {
       &:not(.removeBookmarkButton) {
         display: none;
@@ -690,40 +671,6 @@
         margin-right: 3px;
       }
     }
-
-    .urlbarIconContainer {
-      .urlbarIcon {
-        color: @siteSecureColor;
-        font-size: 12px;
-        background-repeat: no-repeat;
-        background-position: center;
-        position: relative;
-        bottom: -1px;
-
-        // about:newtab
-        &.fa-search {
-          position: relative;
-          bottom: 0;
-          // 50% of #5a5a5a
-          color: rgba(90, 90, 90, 0.5);
-        }
-
-        &.fa-lock,
-        &.fa-unlock,
-        &.fa-exclamation-triangle {
-          font-size: 16px;
-          bottom: 0;
-        }
-
-        &.insecure-color {
-          color: @siteInsecureColor;
-        }
-
-        &.extendedValidation {
-          color: @siteEVColor;
-        }
-      }
-    }
   }
 }
 
diff --git a/less/variables.less b/less/variables.less
index 92b32854536..7228fbb567f 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -45,7 +45,6 @@
 @focusUrlbarOutline: rgba(55, 169, 253, 0.4);
 @siteSecureColor: @buttonColor;
 @siteInsecureColor: #C63626;
-@siteEVColor: green;
 @loadTimeColor: @highlightBlue;
 @activeTabDefaultColor: @chromePrimary;
 @buttonColor: #5a5a5a;
diff --git a/test/lib/selectors.js b/test/lib/selectors.js
index b9c66778a14..4d630f097b1 100644
--- a/test/lib/selectors.js
+++ b/test/lib/selectors.js
@@ -16,7 +16,7 @@ module.exports = {
   tabPage1: '[data-tab-page="0"]',
   tabPage2: '[data-tab-page="1"]',
   closeTab: '[data-test-id="closeTabIcon"]',
-  urlbarIcon: '[data-test-id="urlBarIcon"]',
+  urlbarIcon: '[data-test-id="urlbarIcon"]',
   urlBarSuggestions: '.urlBarSuggestions',
   titleBar: '#titleBar',
   navigatorBookmarked: '[data-test-id="bookmarked"]',