diff --git a/scss/_patterns_side-navigation.scss b/scss/_patterns_side-navigation.scss
index c84ea89169..51ab505b30 100644
--- a/scss/_patterns_side-navigation.scss
+++ b/scss/_patterns_side-navigation.scss
@@ -1,13 +1,16 @@
 @import 'settings';
 
 @mixin vf-p-side-navigation {
-  .p-side-navigation__list {
-    @extend %vf-list;
-
-    .p-side-navigation > &:first-child {
+  .p-side-navigation,
+  .p-side-navigation--icons {
+    & > .p-side-navigation__list:first-child {
       // nudge from top to put text on baseline grid
       padding-top: 0.5 * $spv-inner--x-small;
     }
+  }
+
+  .p-side-navigation__list {
+    @extend %vf-list;
 
     & + & {
       @extend %vf-pseudo-border--top;
@@ -28,13 +31,40 @@
     display: flex;
     padding: $spv-inner--x-small $sph-inner $spv-inner--x-small $sph-inner;
 
-    // nested 2 or 3 levels
+    // space for the right hand icon with default inner spacing on the left
+    $icon-spacing-width: map-get($icon-sizes, default) + $sph-inner;
+
+    .p-side-navigation--icons & {
+      padding-left: $sph-inner + $icon-spacing-width;
+      position: relative;
+    }
+
+    // nested 2nd level of navigation
     .p-side-navigation__item .p-side-navigation__item & {
       padding-left: 2 * $sph-inner;
+
+      // add spacing for variant with right side icons
+      .p-side-navigation--icons & {
+        padding-left: 2 * $sph-inner + $icon-spacing-width;
+      }
     }
 
+    // nested 3rd level of navigation
     .p-side-navigation__item .p-side-navigation__item .p-side-navigation__item & {
       padding-left: 3 * $sph-inner;
+
+      // add spacing for variant with right side icons
+      .p-side-navigation--icons & {
+        padding-left: 3 * $sph-inner + $icon-spacing-width;
+      }
+    }
+  }
+
+  .p-side-navigation--icons {
+    .p-side-navigation__icon {
+      left: $sph-inner;
+      position: absolute;
+      top: $sph-inner--small;
     }
   }
 
@@ -74,7 +104,8 @@
   // border color of items list
     $color-sidenav-list-border: $colors--light-theme--border-default
 ) {
-  .p-side-navigation {
+  .p-side-navigation,
+  .p-side-navigation--icons {
     color: $color-sidenav-text-default;
   }
 
diff --git a/templates/docs/examples/patterns/side-navigation/icons.html b/templates/docs/examples/patterns/side-navigation/icons.html
new file mode 100644
index 0000000000..78f50ea75c
--- /dev/null
+++ b/templates/docs/examples/patterns/side-navigation/icons.html
@@ -0,0 +1,56 @@
+{% extends "_layouts/examples.html" %}
+{% block title %}Side navigation / With icons{% endblock %}
+
+{% block standalone_css %}patterns_side-navigation{% endblock %}
+
+{% block content %}
+<div class="p-side-navigation--icons">
+  <ul class="p-side-navigation__list">
+    <li class="p-side-navigation__item">
+      <a class="p-side-navigation__link is-active" href="#"><i class="p-icon--information p-side-navigation__icon"></i>Information</a>
+    </li>
+    <li class="p-side-navigation__item">
+      <a class="p-side-navigation__link" href="#"><i class="p-icon--user p-side-navigation__icon"></i>Users</a>
+      <ul class="p-side-navigation__list">
+        <li class="p-side-navigation__item">
+          <a class="p-side-navigation__link" href="#">Anna von Example</a>
+        </li>
+        <li class="p-side-navigation__item ">
+          <a class="p-side-navigation__link" href="#">Bob Anonymous</a>
+        </li>
+      </ul>
+    </li>
+    <li class="p-side-navigation__item ">
+      <a class="p-side-navigation__link" href="#">
+        <i class="p-icon--help p-side-navigation__icon"></i>
+        Get help
+        <span class="p-side-navigation__status">
+          <span class="p-label--updated">Updated</span>
+        </span>
+      </a>
+    </li>
+  </ul>
+  <ul class="p-side-navigation__list">
+    <li class="p-side-navigation__item">
+      <a class="p-side-navigation__link" href="#">Release notes</a>
+    </li>
+    <li class="p-side-navigation__item">
+      <a class="p-side-navigation__link" href="#">Contribute</a>
+    </li>
+    <li class="p-side-navigation__item">
+      <a class="p-side-navigation__link" href="#">Contact us</a>
+      <ul class="p-side-navigation__list">
+        <li class="p-side-navigation__item">
+          <a class="p-side-navigation__link" href="#">IRC channel</a>
+        </li>
+        <li class="p-side-navigation__item">
+          <a class="p-side-navigation__link" href="#">Discourse forum</a>
+        </li>
+        <li class="p-side-navigation__item">
+          <a class="p-side-navigation__link" href="#">Contact form</a>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+{% endblock %}
diff --git a/templates/docs/patterns/navigation.md b/templates/docs/patterns/navigation.md
index 3b41f0cafa..4bc7358155 100644
--- a/templates/docs/patterns/navigation.md
+++ b/templates/docs/patterns/navigation.md
@@ -77,6 +77,18 @@ Use `p-side-navigation__status` inside `p-side-navigation__link` elements to add
 View example of the side navigation pattern
 </a>
 
+To add icons on the left side of the items in side navigation use the `.p-side-navigation--items` class.
+
+<div class="p-notification--information">
+  <p class="p-notification__response">
+    <span class="p-notification__status">Note:</span>Icons should only be used on the items in the first level of side navigation.
+  </p>
+</div>
+
+<a href="/docs/examples/patterns/side-navigation/icons" class="js-example">
+View example of the side navigation pattern with icons
+</a>
+
 ### Import
 
 To import just navigation or sub-navigation component into your project, copy snippets below and include it in your main Sass file.