diff --git a/scss/_base_button.scss b/scss/_base_button.scss
index a9aa8c9db..fc288576b 100644
--- a/scss/_base_button.scss
+++ b/scss/_base_button.scss
@@ -98,6 +98,21 @@
         margin-right: -$sph--small;
       }
     }
+
+    &.is-small {
+      & [class*='p-icon'] {
+        margin-left: $sph--x-small;
+        margin-right: $sph--x-small;
+
+        &:first-child {
+          margin-left: -$sph--x-small;
+        }
+
+        &:last-child {
+          margin-right: -$sph--x-small;
+        }
+      }
+    }
   }
 }
 
diff --git a/templates/docs/examples/patterns/buttons/icon.html b/templates/docs/examples/patterns/buttons/icon.html
index be1c2f3d8..ddb595d9b 100644
--- a/templates/docs/examples/patterns/buttons/icon.html
+++ b/templates/docs/examples/patterns/buttons/icon.html
@@ -4,7 +4,19 @@
 {% block standalone_css %}patterns_buttons{% endblock %}
 
 {% block content %}
-<button class="p-button--positive has-icon"><i class="p-icon--success"></i></button>
-<button class="p-button has-icon"><i class="p-icon--plus"></i><span>Icon before text</span></button>
-<button class="p-button has-icon"><span>Icon after text</span><i class="p-icon--chevron-down"></i></button>
+<p>
+  <button class="p-button--positive has-icon"><i class="p-icon--success"></i></button>
+  <button class="p-button has-icon"><i class="p-icon--plus"></i><span>Icon before text</span></button>
+  <button class="p-button has-icon"><span>Icon after text</span><i class="p-icon--chevron-down"></i></button>
+</p>
+<p>
+  <button class="p-button--positive is-dense has-icon"><i class="p-icon--success"></i></button>
+  <button class="p-button is-dense has-icon"><i class="p-icon--plus"></i><span>Icon before text</span></button>
+  <button class="p-button is-dense has-icon"><span>Icon after text</span><i class="p-icon--chevron-down"></i></button>
+</p>
+<p>
+  <button class="p-button--positive is-small has-icon"><i class="p-icon--success"></i></button>
+  <button class="p-button is-small has-icon"><i class="p-icon--plus"></i><span>Icon before text</span></button>
+  <button class="p-button is-small has-icon"><span>Icon after text</span><i class="p-icon--chevron-down"></i></button>
+</p>
 {% endblock %}