diff --git a/res/css/structures/_TabbedView.scss b/res/css/structures/_TabbedView.scss
index ecb7193c18..b888aa287b 100644
--- a/res/css/structures/_TabbedView.scss
+++ b/res/css/structures/_TabbedView.scss
@@ -30,7 +30,7 @@ limitations under the License.
 }
 
 .mx_TabbedView_tabLabel {
-  vertical-align: middle;
+  vertical-align: text-top;
   cursor: pointer;
   display: block;
   border-radius: 3px;
@@ -46,23 +46,23 @@ limitations under the License.
 }
 
 .mx_TabbedView_tabLabel_icon {
-  width: 12px;
-  height: 12px;
+  width: 14px;
+  height: 14px;
   margin-left: 6px;
   margin-right: 9px;
   position: relative;
 }
 
 .mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon {
-  width: 12px;
-  height: 12px;
+  width: 14px;
+  height: 14px;
   display: inline-block;
 }
 
 .mx_TabbedView_tabLabel_icon > .mx_TabbedView_maskedIcon:before {
   background-color: $tab-label-icon-bg-color;
   mask-repeat: no-repeat;
-  mask-size: 12px;
+  mask-size: 14px;
   mask-position: center;
   content: '';
   position: absolute;
diff --git a/res/css/views/dialogs/_UserSettingsDialog.scss b/res/css/views/dialogs/_UserSettingsDialog.scss
index 75d89a1d06..25be25bd56 100644
--- a/res/css/views/dialogs/_UserSettingsDialog.scss
+++ b/res/css/views/dialogs/_UserSettingsDialog.scss
@@ -3,29 +3,29 @@
   display: block;
   text-align: center;
   color: $dialog-title-fg-color;
-  margin-top: 23px;
+  margin-top: 16px;
   margin-bottom: 24px;
   padding: 0;
 }
 
 .mx_UserSettingsDialog_close {
   position: absolute;
-  top: 23px;
+  top: 16px;
   right: 25px;
 }
 
 .mx_UserSettingsDialog_closeIcon {
-  width: 14px;
-  height: 14px;
+  width: 16px;
+  height: 16px;
   display: inline-block;
 }
 
 .mx_UserSettingsDialog_closeIcon:before {
   // TODO: Use real icon
-  mask: url('$(res)/img/feather-icons/video.svg');
+  mask: url('$(res)/img/feather-icons/cancel.svg');
   background-color: $dialog-close-fg-color;
   mask-repeat: no-repeat;
-  mask-size: 14px;
+  mask-size: 16px;
   mask-position: center;
   content: '';
   position: absolute;
@@ -52,16 +52,13 @@
 }
 
 .mx_UserSettingsDialog_preferencesIcon:before {
-  // TODO: Use real icon
-  mask: url('$(res)/img/feather-icons/paperclip.svg');
+  mask: url('$(res)/img/feather-icons/sliders.svg');
 }
 
 .mx_UserSettingsDialog_securityIcon:before {
-  // TODO: Use real icon
-  mask: url('$(res)/img/feather-icons/life-buoy.svg');
+  mask: url('$(res)/img/feather-icons/lock.svg');
 }
 
 .mx_UserSettingsDialog_helpIcon:before {
-  // TODO: Use real icon
-  mask: url('$(res)/img/feather-icons/share.svg');
+  mask: url('$(res)/img/feather-icons/help-circle.svg');
 }
\ No newline at end of file
diff --git a/res/css/views/settings/tabs/_SettingsTab.scss b/res/css/views/settings/tabs/_SettingsTab.scss
index 13e8b0ab51..0753df56af 100644
--- a/res/css/views/settings/tabs/_SettingsTab.scss
+++ b/res/css/views/settings/tabs/_SettingsTab.scss
@@ -1,13 +1,17 @@
 .mx_SettingsTab_heading {
   font-size: 20px;
   font-weight: 600;
+  color: $primary-fg-color;
 }
 
 .mx_SettingsTab_subheading {
   font-size: 14px;
   display: block;
+  font-family: $font-family-semibold;
+  color: $primary-fg-color;
+  margin-bottom: 10px;
 }
 
 .mx_SettingsTab_section {
   margin-top: 10px;
-}
\ No newline at end of file
+}
diff --git a/res/img/feather-icons/cancel.svg b/res/img/feather-icons/cancel.svg
new file mode 100644
index 0000000000..6b734e4053
--- /dev/null
+++ b/res/img/feather-icons/cancel.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="18px" height="18px" viewBox="0 0 18 18" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.2 (15857) - http://www.bohemiancoding.com/sketch -->
+    <title>Slice 1</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="#" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <path d="M9.74464309,-3.02908503 L8.14106175,-3.02908503 L8.14106175,8.19448443 L-3.03028759,8.19448443 L-3.03028759,9.7978515 L8.14106175,9.7978515 L8.14106175,20.9685098 L9.74464309,20.9685098 L9.74464309,9.7978515 L20.9697124,9.7978515 L20.9697124,8.19448443 L9.74464309,8.19448443 L9.74464309,-3.02908503" id="Fill-108" opacity="0.9" fill="#9fa9ba" sketch:type="MSShapeGroup" transform="translate(8.969712, 8.969712) rotate(-315.000000) translate(-8.969712, -8.969712) "></path>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/res/img/feather-icons/help-circle.svg b/res/img/feather-icons/help-circle.svg
new file mode 100644
index 0000000000..7ecb0a8f35
--- /dev/null
+++ b/res/img/feather-icons/help-circle.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14">
+    <g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)">
+        <circle cx="6" cy="6" r="6"/>
+        <path d="M4.254 4.2a1.8 1.8 0 0 1 3.498.6c0 1.2-1.8 1.8-1.8 1.8M6 8.991"/>
+    </g>
+</svg>
diff --git a/res/img/feather-icons/lock.svg b/res/img/feather-icons/lock.svg
new file mode 100644
index 0000000000..1330903b30
--- /dev/null
+++ b/res/img/feather-icons/lock.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="14" viewBox="0 0 13 14">
+    <g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)">
+        <rect width="11" height="6.6" y="5.4" rx="1.2"/>
+        <path d="M2.444 5.4V3c0-1.657 1.368-3 3.056-3s3.056 1.343 3.056 3v2.4"/>
+    </g>
+</svg>
diff --git a/res/img/feather-icons/sliders.svg b/res/img/feather-icons/sliders.svg
new file mode 100644
index 0000000000..5b5ec8656c
--- /dev/null
+++ b/res/img/feather-icons/sliders.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="14" height="12" viewBox="0 0 14 12">
+    <g fill="none" fill-rule="evenodd" stroke="#454545" stroke-linecap="round" stroke-linejoin="round">
+        <path d="M2.636 11V7.111M2.636 4.889V1M7 11V6M7 3.778V1M11.364 11V8.222M11.364 6V1M1 7.111h3.273M5.364 3.778h3.272M9.727 8.222H13"/>
+    </g>
+</svg>
diff --git a/res/themes/dharma/css/_dharma.scss b/res/themes/dharma/css/_dharma.scss
index cf3738a1bb..6d907d17be 100644
--- a/res/themes/dharma/css/_dharma.scss
+++ b/res/themes/dharma/css/_dharma.scss
@@ -5,6 +5,7 @@
    horizontal mess.  Arial empirically gets it right, hence prioritising
    Arial here. */
 $font-family: 'Nunito', Arial, Helvetica, Sans-Serif;
+$font-family-semibold: 'Nunito SemiBold', Arial, Helvetica, Sans-Serif;
 
 // typical text (dark-on-white in light skin)
 $primary-fg-color: #454545;
diff --git a/res/themes/light/css/_base.scss b/res/themes/light/css/_base.scss
index 45b64243c6..ec36f15b89 100644
--- a/res/themes/light/css/_base.scss
+++ b/res/themes/light/css/_base.scss
@@ -4,6 +4,7 @@
    horizontal mess.  Arial empirically gets it right, hence prioritising
    Arial here. */
 $font-family: 'Open Sans', Arial, Helvetica, Sans-Serif;
+$font-family-semibold: 'Open Sans', Arial, Helvetica, Sans-Serif;
 
 // typical text (dark-on-white in light skin)
 $primary-fg-color: #454545;