diff --git a/packages/@nucleus/tests/dummy/app/templates/components/nucleus-inline-banner/demo-2.hbs b/packages/@nucleus/tests/dummy/app/templates/components/nucleus-inline-banner/demo-2.hbs
index 4384bb7d..2e7147f7 100644
--- a/packages/@nucleus/tests/dummy/app/templates/components/nucleus-inline-banner/demo-2.hbs
+++ b/packages/@nucleus/tests/dummy/app/templates/components/nucleus-inline-banner/demo-2.hbs
@@ -13,6 +13,7 @@
         variant="text"
         size="mini"
         icon="nucleus-cross"
+        iconOnly=true
         onClick=(action banner.close)}}
       </div>
     {{/nucleus-inline-banner}}
diff --git a/packages/banner/addon/templates/components/nucleus-banner/item.hbs b/packages/banner/addon/templates/components/nucleus-banner/item.hbs
index 56c20488..f5d2ff3b 100644
--- a/packages/banner/addon/templates/components/nucleus-banner/item.hbs
+++ b/packages/banner/addon/templates/components/nucleus-banner/item.hbs
@@ -24,5 +24,6 @@
     customClass=(concat "nucleus-banner-item__close")
     icon="nucleus-cross"
     iconSize="mini"
+    iconOnly=true
     onClick=(action "onClose" item)}}
 {{/if}}
diff --git a/packages/banner/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-banner__banner_with_link_passes_visual_regression_tests__assert0_0_document_0_webview.png b/packages/banner/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-banner__banner_with_link_passes_visual_regression_tests__assert0_0_document_0_webview.png
index f53095be..2c72bab4 100644
Binary files a/packages/banner/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-banner__banner_with_link_passes_visual_regression_tests__assert0_0_document_0_webview.png and b/packages/banner/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-banner__banner_with_link_passes_visual_regression_tests__assert0_0_document_0_webview.png differ
diff --git a/packages/banner/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-banner__normal_banner_passes_visual_regression_tests__assert0_0_document_0_webview.png b/packages/banner/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-banner__normal_banner_passes_visual_regression_tests__assert0_0_document_0_webview.png
index 98ebe809..10102c87 100644
Binary files a/packages/banner/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-banner__normal_banner_passes_visual_regression_tests__assert0_0_document_0_webview.png and b/packages/banner/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-banner__normal_banner_passes_visual_regression_tests__assert0_0_document_0_webview.png differ
diff --git a/packages/button/addon/components/nucleus-button.js b/packages/button/addon/components/nucleus-button.js
index b8a8d107..7e8bf9d4 100644
--- a/packages/button/addon/components/nucleus-button.js
+++ b/packages/button/addon/components/nucleus-button.js
@@ -80,7 +80,7 @@ class NucleusButton extends Component {
   @computed('iconSize', 'size')
   get _iconSize() {
     let iconSize = this.get('iconSize');
-    let defaultSize = this.get('size') ? this.get('size') : 'medium';
+    let defaultSize = this.get('size') ? this.get('size') : 'small';
     return iconSize ? iconSize : defaultSize;
   }
 
diff --git a/packages/button/addon/styles/components/_nucleus-button.scss b/packages/button/addon/styles/components/_nucleus-button.scss
index 72e7e477..1ea3a646 100644
--- a/packages/button/addon/styles/components/_nucleus-button.scss
+++ b/packages/button/addon/styles/components/_nucleus-button.scss
@@ -24,8 +24,12 @@ $active-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, .25);
 
 .nucleus-button {
   font-size: $font-size-14;
+  vertical-align: middle;
   line-height: 1.2;
   padding: 6px 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   border: 1px solid transparent;
   border-radius: 4px;
   outline: 0;
@@ -38,9 +42,10 @@ $active-box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, .25);
   min-width: 80px;
 
   &__icon {
+    display: inherit;
+
     &.nucleus--active {
-      position: relative;
-      top: .125em;
+      margin-right: 4px;
     }
   }
 
diff --git a/packages/button/addon/templates/components/nucleus-button.hbs b/packages/button/addon/templates/components/nucleus-button.hbs
index 80cb2b1b..254f3345 100644
--- a/packages/button/addon/templates/components/nucleus-button.hbs
+++ b/packages/button/addon/templates/components/nucleus-button.hbs
@@ -1,6 +1,6 @@
 {{#if icon}}
   <span class="nucleus-button__icon {{unless iconOnly "nucleus--active"}}">
-    {{nucleus-icon name=icon size=_iconSize}}
+    {{nucleus-icon name=icon size=_iconSize variant=_iconVariant}}
   </span>
 {{/if}}
 {{#if (and _isLoading _isShowLoading)}}
diff --git a/packages/button/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-button__buttons_pass_visual_regression_tests__assert0_0_document_0_webview.png b/packages/button/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-button__buttons_pass_visual_regression_tests__assert0_0_document_0_webview.png
index 13cab02d..a0d318aa 100644
Binary files a/packages/button/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-button__buttons_pass_visual_regression_tests__assert0_0_document_0_webview.png and b/packages/button/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-button__buttons_pass_visual_regression_tests__assert0_0_document_0_webview.png differ
diff --git a/packages/button/tests/integration/components/nucleus-button-test.js b/packages/button/tests/integration/components/nucleus-button-test.js
index 4108ca90..29ae847b 100644
--- a/packages/button/tests/integration/components/nucleus-button-test.js
+++ b/packages/button/tests/integration/components/nucleus-button-test.js
@@ -61,7 +61,7 @@ module('Integration | Component | nucleus-button', function(hooks) {
   });
 
   test('it with icon property shows icon', async function(assert) {
-    await render(hbs`{{nucleus-button icon="nucleus-cross"}}`);
+    await render(hbs`{{nucleus-button icon="nucleus-cross" iconOnly=true}}`);
 
     assert.dom('button svg').hasClass('nucleus-icon', 'svg icon is rendered');
   });
diff --git a/packages/inline-banner/addon/templates/components/nucleus-inline-banner.hbs b/packages/inline-banner/addon/templates/components/nucleus-inline-banner.hbs
index 7ec2aa64..fd34c16f 100644
--- a/packages/inline-banner/addon/templates/components/nucleus-inline-banner.hbs
+++ b/packages/inline-banner/addon/templates/components/nucleus-inline-banner.hbs
@@ -17,6 +17,7 @@
         variant="text"
         size="mini"
         icon="nucleus-cross"
+        iconOnly=true
         onClick=(action "onCloseTip")}}
     </div>
   {{/if}}
diff --git a/packages/inline-banner/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-inline-banner__it_passes_visual_regression_tests__assert0_0_document_0_webview.png b/packages/inline-banner/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-inline-banner__it_passes_visual_regression_tests__assert0_0_document_0_webview.png
index 002ce6da..e88d303c 100644
Binary files a/packages/inline-banner/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-inline-banner__it_passes_visual_regression_tests__assert0_0_document_0_webview.png and b/packages/inline-banner/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-inline-banner__it_passes_visual_regression_tests__assert0_0_document_0_webview.png differ
diff --git a/packages/modal/addon/templates/components/nucleus-modal/header.hbs b/packages/modal/addon/templates/components/nucleus-modal/header.hbs
index 5383e476..1e794880 100644
--- a/packages/modal/addon/templates/components/nucleus-modal/header.hbs
+++ b/packages/modal/addon/templates/components/nucleus-modal/header.hbs
@@ -15,6 +15,7 @@
       customClass=(concat "nucleus-modal__close " position)
       icon="nucleus-cross"
       iconSize="mini"
+      iconOnly=true
       onClick=(action onClose)}}
   {{/if}}
 {{/if}}
diff --git a/packages/modal/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-modal__visual_regression_for_large_confirm_dialog__assert0_0_document_0_webview.png b/packages/modal/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-modal__visual_regression_for_large_confirm_dialog__assert0_0_document_0_webview.png
index e9b2565e..a9aa1e4e 100644
Binary files a/packages/modal/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-modal__visual_regression_for_large_confirm_dialog__assert0_0_document_0_webview.png and b/packages/modal/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-modal__visual_regression_for_large_confirm_dialog__assert0_0_document_0_webview.png differ
diff --git a/packages/modal/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-modal__visual_regression_for_modal__assert0_0_document_0_webview.png b/packages/modal/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-modal__visual_regression_for_modal__assert0_0_document_0_webview.png
index 1051bd53..512e2bc1 100644
Binary files a/packages/modal/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-modal__visual_regression_for_modal__assert0_0_document_0_webview.png and b/packages/modal/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-modal__visual_regression_for_modal__assert0_0_document_0_webview.png differ
diff --git a/packages/modal/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-modal__visual_regression_for_normal_confirm_dialog__assert0_0_document_0_webview.png b/packages/modal/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-modal__visual_regression_for_normal_confirm_dialog__assert0_0_document_0_webview.png
index 23adc43b..d63ee141 100644
Binary files a/packages/modal/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-modal__visual_regression_for_normal_confirm_dialog__assert0_0_document_0_webview.png and b/packages/modal/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-modal__visual_regression_for_normal_confirm_dialog__assert0_0_document_0_webview.png differ
diff --git a/packages/toast-message/addon/templates/components/nucleus-toast-message.hbs b/packages/toast-message/addon/templates/components/nucleus-toast-message.hbs
index e6df1ac7..ba2ce03c 100644
--- a/packages/toast-message/addon/templates/components/nucleus-toast-message.hbs
+++ b/packages/toast-message/addon/templates/components/nucleus-toast-message.hbs
@@ -25,6 +25,7 @@
             size="mini"
             customClass=(concat "flash-message-close")
             icon="nucleus-cross"
+            iconOnly=true
             onClick=(action close)}}
         </div>
       {{/flash-message}}
diff --git a/packages/toast-message/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-toast-message__it_passes_visual_regression_tests__assert0_0_document_0_webview.png b/packages/toast-message/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-toast-message__it_passes_visual_regression_tests__assert0_0_document_0_webview.png
index 3852639d..88d95241 100644
Binary files a/packages/toast-message/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-toast-message__it_passes_visual_regression_tests__assert0_0_document_0_webview.png and b/packages/toast-message/ember-backstop/backstop_data/bitmaps_reference/ember-backstoptest_Integration__Component__nucleus-toast-message__it_passes_visual_regression_tests__assert0_0_document_0_webview.png differ