From 7e732c8a3ab561059c6591376051f739527ebdb5 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Fri, 25 May 2018 11:20:35 -0500
Subject: [PATCH] Icon updates (#810)

* feat(icons): start updating icons

* feat(icons): update more icons

* feat(icons): continue icon work

* feat(icons): finish up icon updates

* fix(overflow): fix hover colors on overflow menu
---
 .../accordion/accordion--legacy.hbs           |   2 +-
 src/components/accordion/accordion.hbs        |  16 +-
 src/components/button/_button.scss            |   5 +
 src/components/button/button.hbs              |  11 +-
 src/components/card/card.hbs                  |  64 ++++----
 src/components/code-snippet/code-snippet.hbs  |  62 ++++----
 src/components/combo-box/combo-box.hbs        |  22 +--
 .../content-switcher/content-switcher.hbs     |  23 +--
 src/components/copy-button/copy-button.hbs    |   4 +-
 .../data-table-v2--expandable.hbs             |  23 +--
 .../data-table-v2--pagination.hbs             | 149 ++++++++----------
 .../data-table-v2/data-table-v2.hbs           |  97 +++++++-----
 .../date-picker/date-picker--range-light.hbs  |  14 +-
 .../date-picker/date-picker--range.hbs        |   7 +-
 .../date-picker/date-picker--single-light.hbs |   7 +-
 .../date-picker/date-picker--single.hbs       |   7 +-
 src/components/dropdown/dropdown.hbs          |  21 ++-
 src/components/form/form.hbs                  |   4 +-
 src/components/modal/_modal.scss              |   3 -
 src/components/modal/modal.hbs                |  20 ++-
 src/components/multi-select/multi-select.hbs  |  36 +----
 .../notification/inline-notification.hbs      |  39 +++--
 .../notification/toast-notification.hbs       |  20 ++-
 src/components/number-input/number-input.hbs  |  24 +--
 .../overflow-menu/_overflow-menu.scss         |  11 +-
 .../overflow-menu/overflow-menu.hbs           |  20 ++-
 src/components/pagination/pagination.hbs      |  16 +-
 .../_progress-indicator.scss                  |   5 +-
 .../progress-indicator/progress-indicator.hbs |   8 +-
 src/components/search/_search.scss            |   6 +-
 src/components/search/search.hbs              |  44 ++----
 src/components/select/select.hbs              |  17 +-
 .../structured-list--selection.hbs            |  39 +++--
 src/components/tabs/tabs.hbs                  |   4 +-
 src/components/tile/tile--expandable.hbs      |   4 +-
 src/components/tile/tile--grid.hbs            |  24 +--
 src/components/tile/tile--selectable.hbs      |  10 +-
 .../time-picker/time-picker--light.hbs        |   8 +-
 src/components/time-picker/time-picker.hbs    |   8 +-
 src/components/toolbar/toolbar.hbs            |  25 +--
 src/components/tooltip/tooltip--icon.hbs      |   9 +-
 src/components/tooltip/tooltip.hbs            |  13 +-
 42 files changed, 487 insertions(+), 464 deletions(-)

diff --git a/src/components/accordion/accordion--legacy.hbs b/src/components/accordion/accordion--legacy.hbs
index 7c475b840d67..a69dcce3434c 100644
--- a/src/components/accordion/accordion--legacy.hbs
+++ b/src/components/accordion/accordion--legacy.hbs
@@ -47,4 +47,4 @@
         aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
     </div>
   </li>
-</ul>
\ No newline at end of file
+</ul>
diff --git a/src/components/accordion/accordion.hbs b/src/components/accordion/accordion.hbs
index 4539f1c06d81..ef82ceb46fb7 100644
--- a/src/components/accordion/accordion.hbs
+++ b/src/components/accordion/accordion.hbs
@@ -1,8 +1,8 @@
 <ul data-accordion class="bx--accordion">
   <li data-accordion-item class="bx--accordion__item">
     <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane1">
-      <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+      <svg class="bx--accordion__arrow" width="7" height="12" viewBox="0 0 7 12">
+        <path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
       </svg>
       <p class="bx--accordion__title">Section 1 title </p>
     </button>
@@ -13,8 +13,8 @@
   </li>
   <li data-accordion-item class="bx--accordion__item">
     <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane2">
-      <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+      <svg class="bx--accordion__arrow" width="7" height="12" viewBox="0 0 7 12">
+        <path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
       </svg>
       <p class="bx--accordion__title">Section 2 title</p>
     </button>
@@ -25,8 +25,8 @@
   </li>
   <li data-accordion-item class="bx--accordion__item">
     <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane3">
-      <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+      <svg class="bx--accordion__arrow" width="7" height="12" viewBox="0 0 7 12">
+        <path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
       </svg>
       <p class="bx--accordion__title">Section 3 title</p>
     </button>
@@ -37,8 +37,8 @@
   </li>
   <li data-accordion-item class="bx--accordion__item">
     <button class="bx--accordion__heading" aria-expanded="false" aria-controls="pane4">
-      <svg class="bx--accordion__arrow" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+      <svg class="bx--accordion__arrow" width="7" height="12" viewBox="0 0 7 12">
+        <path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
       </svg>
       <p class="bx--accordion__title">Section 4 title</p>
     </button>
diff --git a/src/components/button/_button.scss b/src/components/button/_button.scss
index 6104519e896f..e9861c4389e2 100644
--- a/src/components/button/_button.scss
+++ b/src/components/button/_button.scss
@@ -78,6 +78,11 @@
     &:focus:disabled {
       color: $ui-05;
     }
+
+    &:hover > .#{$prefix}--btn__icon,
+    &:focus > .#{$prefix}--btn__icon {
+      fill: $inverse-01;
+    }
   }
 
   .#{$prefix}--btn--ghost {
diff --git a/src/components/button/button.hbs b/src/components/button/button.hbs
index e2631a6adea8..f8e91ed75bb2 100644
--- a/src/components/button/button.hbs
+++ b/src/components/button/button.hbs
@@ -1,8 +1,9 @@
-<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" {{#if danger}}aria-label="danger"{{/if}} type="button">Button</button>
-<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" {{#if danger}}aria-label="danger"{{/if}} type="button" disabled>Button</button>
-<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" {{#if danger}}aria-label="danger"{{/if}} type="button">
+<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" {{#if danger}}aria-label="danger" {{/if}} type="button">Button</button>
+<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" {{#if danger}}aria-label="danger" {{/if}} type="button"
+  disabled>Button</button>
+<button class="bx--btn bx--btn--{{variant}}{{#if small}} bx--btn--sm{{/if}}" {{#if danger}}aria-label="danger" {{/if}} type="button">
   With icon
-  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
+  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16">
+    <path d="M7.5 7.5H4v1h3.5V12h1V8.5H12v-1H8.5V4h-1v3.5zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
   </svg>
 </button>
diff --git a/src/components/card/card.hbs b/src/components/card/card.hbs
index e9c22f815786..936e7fc4202a 100644
--- a/src/components/card/card.hbs
+++ b/src/components/card/card.hbs
@@ -2,11 +2,13 @@
   <div class="bx--card__card-overview">
     <!-- OverflowMenu -->
     <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
-      <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
+      <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
         <title>list of options</title>
-        <circle cx="2" cy="2" r="2"></circle>
-        <circle cx="2" cy="10" r="2"></circle>
-        <circle cx="2" cy="18" r="2"></circle>
+        <g fill-rule="evenodd">
+          <circle cx="1.5" cy="1.5" r="1.5" />
+          <circle cx="1.5" cy="7.5" r="1.5" />
+          <circle cx="1.5" cy="13.5" r="1.5" />
+        </g>
       </svg>
       <ul class="bx--overflow-menu-options">
         <li class="bx--overflow-menu-options__option">
@@ -37,36 +39,36 @@
   </div>
   </section>
   {{#unless hasStatus}}
-    <footer class="bx--card-footer">
-      <button class="bx--btn bx--btn--primary bx--btn--sm" type="button" title="View credentials">View credentials</button>
-      <a href="" class="bx--card-footer__link">Docs</a>
-    </footer>
+  <footer class="bx--card-footer">
+    <button class="bx--btn bx--btn--primary bx--btn--sm" type="button" title="View credentials">View credentials</button>
+    <a href="" class="bx--card-footer__link">Docs</a>
+  </footer>
   {{else}}
-    <div class="bx--card-footer">
-      <div class="bx--card-footer__app-status">
-        <div class="bx--card-footer__app-status--running active">
-          <div class="bx--running__text">Running</div>
-        </div>
-        <div class="bx--card-footer__app-status--not-running">
-          <div class="bx--not-running__text">Not Running</div>
-        </div>
-        <div class="bx--card-footer__app-status--stopped">
-          <div class="bx--stopped__text">Stopped</div>
-        </div>
+  <div class="bx--card-footer">
+    <div class="bx--card-footer__app-status">
+      <div class="bx--card-footer__app-status--running active">
+        <div class="bx--running__text">Running</div>
       </div>
-      <div class="bx--card-footer__app-actions">
-        <button class="bx--app-actions__button" id="restart-app" aria-label="restart-app">
-          <svg class="bx--app-actions__button--icon" width="12" height="16" viewBox="0 0 12 16" fill-rule="evenodd">
-            <path d="M6 8l1.3 1.3 1.9-1.9L10.6 6 12 4.7 7.3 0 6 1.2l2.6 2.4H6.1h-.2c-1.7 0-3.3.8-4.4 2C.5 6.7 0 8.1 0 9.6c0 3.3 2.7 6 6 6 1.6 0 3-.6 4-1.6l-1.4-1.4c-.7.6-1.6 1-2.6 1-2.2 0-4-1.8-4-4s1.8-4 4-4H8.8l-.6.6L6 8z"></path>
-          </svg>
-        </button>
-        <button class="bx--app-actions__button" id="load-app" aria-label="load-app">
-          <svg class="bx--app-actions__button--icon" width="16" height="16" viewBox="-3 5 16 16" fill-rule="evenodd">
-            <path d="M7.5 12l3.6-3.6V11H13V5H7.1v2h2.5l-3.5 3.5z"></path>
-            <path d="M11 19H-1V9h5V5h-7v16h16v-7h-2z"></path>
-          </svg>
-        </button>
+      <div class="bx--card-footer__app-status--not-running">
+        <div class="bx--not-running__text">Not Running</div>
       </div>
+      <div class="bx--card-footer__app-status--stopped">
+        <div class="bx--stopped__text">Stopped</div>
+      </div>
+    </div>
+    <div class="bx--card-footer__app-actions">
+      <button class="bx--app-actions__button" id="restart-app" aria-label="restart-app">
+        <svg class="bx--app-actions__button--icon" width="12" height="16" viewBox="0 0 12 16" fill-rule="evenodd">
+          <path d="M6 8l1.3 1.3 1.9-1.9L10.6 6 12 4.7 7.3 0 6 1.2l2.6 2.4H6.1h-.2c-1.7 0-3.3.8-4.4 2C.5 6.7 0 8.1 0 9.6c0 3.3 2.7 6 6 6 1.6 0 3-.6 4-1.6l-1.4-1.4c-.7.6-1.6 1-2.6 1-2.2 0-4-1.8-4-4s1.8-4 4-4H8.8l-.6.6L6 8z"></path>
+        </svg>
+      </button>
+      <button class="bx--app-actions__button" id="load-app" aria-label="load-app">
+        <svg class="bx--app-actions__button--icon" width="16" height="16" viewBox="-3 5 16 16" fill-rule="evenodd">
+          <path d="M7.5 12l3.6-3.6V11H13V5H7.1v2h2.5l-3.5 3.5z"></path>
+          <path d="M11 19H-1V9h5V5h-7v16h16v-7h-2z"></path>
+        </svg>
+      </button>
     </div>
+  </div>
   {{/unless}}
 </article>
diff --git a/src/components/code-snippet/code-snippet.hbs b/src/components/code-snippet/code-snippet.hbs
index 823a847f6e1a..5ac115724318 100644
--- a/src/components/code-snippet/code-snippet.hbs
+++ b/src/components/code-snippet/code-snippet.hbs
@@ -1,17 +1,18 @@
 {{#is variant "inline"}}
-<p>Here is an example of a text that a user would be reading. In this paragraph would be 
-<button data-copy-btn="" class="bx--snippet bx--snippet--inline {{#if light}} bx--snippet--light{{/if}}" aria-label="Copy code" tabindex="0">
-  <code>inline code</code>
-  <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
-</button> 
-that the user could look at and copy in to their code editor.</p>
+<p>Here is an example of a text that a user would be reading. In this paragraph would be
+  <button data-copy-btn="" class="bx--snippet bx--snippet--inline {{#if light}} bx--snippet--light{{/if}}" aria-label="Copy code"
+    tabindex="0">
+    <code>inline code</code>
+    <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
+  </button>
+  that the user could look at and copy in to their code editor.</p>
 {{else}}
 
-  <div class="bx--snippet bx--snippet--{{variant}}" {{#is variant "multi"}}data-code-snippet{{/is}}>
-    <div class="bx--snippet-container">
+<div class="bx--snippet bx--snippet--{{variant}}" {{#is variant "multi"}}data-code-snippet{{/is}}>
+  <div class="bx--snippet-container">
 
-      <pre>
-        <code>     
+    <pre>
+        <code>
   @mixin grid-container {
     width: 100%;
     padding-right: padding(mobile);
@@ -32,23 +33,30 @@ that the user could look at and copy in to their code editor.</p>
     hidden : - 1,
     overflowHidden: - 1,
     floating: 10000
-  );       
-     
+  );
+
   </code>
   </pre>
-    </div>
-    <button data-copy-btn class="bx--snippet-button" aria-label="Copy code" tabindex="0">
-      <svg class="bx--snippet__icon" width="18" height="24" viewBox="0 0 18 24" fill-rule="evenodd">
-        <path d="M13 5V0H0v19h5v5h13V5h-5zM2 17V2h9v3H5v12H2zm14 5H7V7h9v15z"></path>
-        <path d="M9 9h5v2H9zM9 12h5v2H9zM9 15h3v2H9z"></path>
-      </svg>
-      <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
-    </button>
-    {{#is variant "multi"}}
-      <button class="bx--btn bx--btn--ghost bx--btn--sm bx--snippet-btn--expand" type="button">
-        <span class="bx--snippet-btn--text" data-show-more-text="Show more" data-show-less-text="Show less">Show more</span>
-        <svg class="bx--icon-chevron--down" width='12' height='8' viewBox='0 0 12 8' fill-rule='evenodd' aria-label="Show more icon" alt="Show more icon"><title>Show more icon</title><path d='M10.6 0L6 4.7 1.4 0 0 1.4l6 6.1 6-6.1z'></path></svg>
-      </button>
-    {{/is}}
   </div>
- {{/is}}
\ No newline at end of file
+  <button data-copy-btn class="bx--snippet-button" aria-label="Copy code" tabindex="0">
+    <svg class="bx--snippet__icon" width="16" height="16" viewBox="0 0 16 16">
+      <g fill-rule="nonzero">
+        <path d="M1 10H0V2.008a2 2 0 0 1 1.998-2L9.999 0l.002 1-8.002.008a1 1 0 0 0-1 1V10z" />
+        <path d="M11 4.207v3.794h3.794L11 4.207zm4 4.794h-4a1 1 0 0 1-1-1V4H4.5a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V9.001zM11 3a.5.5 0 0 1 .354.146l4.5 4.5A.5.5 0 0 1 16 8v6.5a1.5 1.5 0 0 1-1.5 1.5h-10A1.5 1.5 0 0 1 3 14.5v-10A1.5 1.5 0 0 1 4.5 3H11z"
+        />
+      </g>
+    </svg>
+    <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
+  </button>
+  {{#is variant "multi"}}
+  <button class="bx--btn bx--btn--ghost bx--btn--sm bx--snippet-btn--expand" type="button">
+    <span class="bx--snippet-btn--text" data-show-more-text="Show more" data-show-less-text="Show less">Show more</span>
+    <svg class="bx--icon-chevron--down" width="12" height="7" viewBox="0 0 12 7" aria-label="Show more icon">
+      <title>Show more icon</title>
+      <path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
+    </svg>
+
+  </button>
+  {{/is}}
+</div>
+{{/is}}
diff --git a/src/components/combo-box/combo-box.hbs b/src/components/combo-box/combo-box.hbs
index 9b57d36c919a..2b3e4d4c061f 100644
--- a/src/components/combo-box/combo-box.hbs
+++ b/src/components/combo-box/combo-box.hbs
@@ -1,21 +1,25 @@
 <div class="bx--form-item bx--combo-box bx--list-box{{#if disabled}} bx--list-box--disabled{{/if}}">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true"{{#if disabled}} disabled{{/if}}>
-    <input class="bx--text-input" role="combobox" aria-autocomplete="list" aria-expanded="false" autocomplete="off" value="" id="downshift-input-2" placeholder="Filter..."{{#if disabled}} disabled{{/if}}>
+  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true"
+    {{#if disabled}} disabled{{/if}}>
+    <input class="bx--text-input" role="combobox" aria-autocomplete="list" aria-expanded="false" autocomplete="off" value=""
+      id="downshift-input-2" placeholder="Filter..." {{#if disabled}} disabled{{/if}}>
     <div class="bx--list-box__menu-icon">
-      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Open menu">
-        <title>Open menu</title>
-        <path d="M10 0L5 5 0 0z"></path>
+      <svg width="10" height="5" viewBox="0 0 10 5" aria-label="Open menu" name="caret--down" role="img">
+        <title>Close menu</title>
+        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
       </svg>
     </div>
   </div>
 </div>
 <div class="bx--form-item bx--combo-box bx--list-box{{#if disabled}} bx--list-box--disabled{{/if}}">
-  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true"{{#if disabled}} disabled{{/if}}>
-    <input class="bx--text-input" role="combobox" aria-autocomplete="list" aria-expanded="true" autocomplete="off" value="" id="downshift-input-2" placeholder="Filter..." aria-activedescendant="downshift-1-item-2"{{#if disabled}} disabled{{/if}}>
+  <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true"
+    {{#if disabled}} disabled{{/if}}>
+    <input class="bx--text-input" role="combobox" aria-autocomplete="list" aria-expanded="true" autocomplete="off" value="" id="downshift-input-2"
+      placeholder="Filter..." aria-activedescendant="downshift-1-item-2" {{#if disabled}} disabled{{/if}}>
     <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
-      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Close menu">
+      <svg width="10" height="5" viewBox="0 0 10 5" aria-label="Open menu" name="caret--down" role="img">
         <title>Close menu</title>
-        <path d="M10 0L5 5 0 0z"></path>
+        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
       </svg>
     </div>
   </div>
diff --git a/src/components/content-switcher/content-switcher.hbs b/src/components/content-switcher/content-switcher.hbs
index 7d5782a37915..6c0f897a4d82 100644
--- a/src/components/content-switcher/content-switcher.hbs
+++ b/src/components/content-switcher/content-switcher.hbs
@@ -1,20 +1,25 @@
 <div data-content-switcher class="bx--content-switcher">
   <button class="bx--content-switcher-btn bx--content-switcher--selected" data-target=".demo--panel--opt-1">
     {{#if hasIcon}}
-      <svg class="bx--content-switcher__icon" width="16" height="16" viewBox="0 0 16 16"><path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path></svg>
-    {{/if}}
-    First section
+    <svg class="bx--content-switcher__icon" width="16" height="16" viewBox="0 0 16 16">
+      <path d="M7.5 7.5H4v1h3.5V12h1V8.5H12v-1H8.5V4h-1v3.5zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
+    </svg>
+    {{/if}} First section
   </button>
   <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-2">
     {{#if hasIcon}}
-      <svg class="bx--content-switcher__icon" width='12' height='9' viewBox='0 0 12 9' fill-rule='evenodd'><path d='M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z'></path></svg>
-    {{/if}}
-    Second section
+    <svg class="bx--content-switcher__icon" width="16" height="16" viewBox="0 0 16 16">
+      <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
+        fill-rule="evenodd" />
+    </svg>
+    {{/if}} Second section
   </button>
   <button class="bx--content-switcher-btn" data-target=".demo--panel--opt-3">
     {{#if hasIcon}}
-      <svg class="bx--content-switcher__icon" width='16' height='15' viewBox='0 0 16 15' fill-rule='evenodd'><path d='M8.11 11.75l-4.5 3.2c-.2.1-.5 0-.4-.3l1.5-5.1-4.6-3.2c-.2-.2-.1-.5.1-.5l5.5-.5 2-5.2c.1-.2.4-.2.5 0l2 5.2 5.5.5c.2 0 .3.3.1.4l-4.5 3.3 1.5 5.1c.1.2-.2.4-.4.3l-4.3-3.2z'></path> </svg>
-    {{/if}}
-    Third section
+    <svg class="bx--content-switcher__icon" width="16" height="16" viewBox="0 0 16 16">
+      <path d="M8.5 7.007h.005v-1h-2v1H7.5v3.991h-2v1h2V12h1v-.002h2v-1h-2V7.007zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM8 4.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"
+        fill-rule="evenodd" />
+    </svg>
+    {{/if}} Third section
   </button>
 </div>
diff --git a/src/components/copy-button/copy-button.hbs b/src/components/copy-button/copy-button.hbs
index 923e4a98507f..c93c916add44 100644
--- a/src/components/copy-button/copy-button.hbs
+++ b/src/components/copy-button/copy-button.hbs
@@ -1,7 +1,7 @@
 <button data-copy-btn class="bx--btn bx--btn--primary bx--btn--copy bx--btn--sm">
   Copy button
-  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-    <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
+  <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16">
+    <path d="M7.5 7.5H4v1h3.5V12h1V8.5H12v-1H8.5V4h-1v3.5zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
   </svg>
   <div class="bx--btn--copy__feedback" data-feedback="Copied!"></div>
 </button>
diff --git a/src/components/data-table-v2/data-table-v2--expandable.hbs b/src/components/data-table-v2/data-table-v2--expandable.hbs
index e73f2142ba07..0d93a0bc90e9 100644
--- a/src/components/data-table-v2/data-table-v2--expandable.hbs
+++ b/src/components/data-table-v2/data-table-v2--expandable.hbs
@@ -2,17 +2,18 @@
   <h4 class="bx--data-table-v2-header">Table title</h4>
   <div class="bx--table-toolbar">
     <div class="bx--toolbar-search-container">
-      <div data-search class="bx--search bx--search--sm" role="search">
-        <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-          <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-          <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+      <div data-search class="bx--search bx--search--light bx--search--sm" role="search">
+        <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
+          <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
+            fill-rule="nonzero" />
         </svg>
         <label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
         <input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
         <button class="bx--search-close bx--search-close--hidden" title="Clear search
         input" aria-label="Clear search input">
-          <svg width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"></path>
+          <svg width="16" height="16" viewBox="0 0 16 16">
+            <path d="M8 7.293L5.525 4.818l-.707.707L7.293 8l-2.475 2.475.707.707L8 8.707l2.475 2.475.707-.707L8.707 8l2.475-2.475-.707-.707L8 7.293zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
+              fill-rule="evenodd" />
           </svg>
         </button>
       </div>
@@ -35,8 +36,8 @@
       <tr class="bx--parent-row-v2" data-parent-row>
         <td class="bx--table-expand-v2" data-event="expand">
           <button class="bx--table-expand-v2__button">
-            <svg class="bx--table-expand-v2__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-              <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+            <svg class="bx--table-expand-v2__svg" width="7" height="12" viewBox="0 0 7 12">
+              <path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
             </svg>
           </button>
         </td>
@@ -62,10 +63,10 @@
       <tr class="bx--parent-row-v2" data-parent-row>
         <td class="bx--table-expand-v2" data-event="expand">
           <button class="bx--table-expand-v2__button">
-            <svg class="bx--table-expand-v2__svg" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-              <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+            <svg class="bx--table-expand-v2__svg" width="7" height="12" viewBox="0 0 7 12">
+              <path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
             </svg>
-            </butto>
+          </button>
         </td>
         <td>Load Balancer 1</td>
         <td>HTTP</td>
diff --git a/src/components/data-table-v2/data-table-v2--pagination.hbs b/src/components/data-table-v2/data-table-v2--pagination.hbs
index 0432092f697e..36793c25e6bf 100644
--- a/src/components/data-table-v2/data-table-v2--pagination.hbs
+++ b/src/components/data-table-v2/data-table-v2--pagination.hbs
@@ -5,22 +5,22 @@
       <div class="bx--action-list">
         <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
           Ghost
-          <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
+          <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16">
+            <path d="M7.5 7.5H4v1h3.5V12h1V8.5H12v-1H8.5V4h-1v3.5zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
           </svg>
         </button>
 
         <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
           Ghost
-          <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
+          <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16">
+            <path d="M7.5 7.5H4v1h3.5V12h1V8.5H12v-1H8.5V4h-1v3.5zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
           </svg>
         </button>
 
         <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
           Ghost
-          <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
+          <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16">
+            <path d="M7.5 7.5H4v1h3.5V12h1V8.5H12v-1H8.5V4h-1v3.5zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
           </svg>
         </button>
       </div>
@@ -32,16 +32,17 @@
     </div>
     <div class="bx--toolbar-search-container">
       <div data-search class="bx--search bx--search--sm bx--search--light" role="search">
-        <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-          <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-          <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+        <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
+          <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
+            fill-rule="nonzero" />
         </svg>
         <label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
         <input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
         <button class="bx--search-close bx--search-close--hidden" title="Clear search
         input" aria-label="Clear search input">
-          <svg width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"></path>
+          <svg width="16" height="16" viewBox="0 0 16 16">
+            <path d="M8 7.293L5.525 4.818l-.707.707L7.293 8l-2.475 2.475.707.707L8 8.707l2.475 2.475.707-.707L8.707 8l2.475-2.475-.707-.707L8 7.293zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
+              fill-rule="evenodd" />
           </svg>
         </button>
       </div>
@@ -79,58 +80,54 @@
         <th>
           <input data-event="select-all" id="bx--checkbox-90" class="bx--checkbox" type="checkbox" value="green" name="checkbox-20">
           <label for="bx--checkbox-90" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
+            <span class="bx--checkbox-appearance" />
           </label>
         </th>
         <th>
           <button class="bx--table-sort-v2" data-event="sort">
             <span class="bx--table-header-label">Name</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
+            <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5">
+              <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
             </svg>
           </button>
         </th>
         <th>
           <button class="bx--table-sort-v2" data-event="sort">
             <span>Protocol</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
+            <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5">
+              <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
             </svg>
           </button>
         </th>
         <th>
           <button class="bx--table-sort-v2" data-event="sort">
             <span>Something</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
+            <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5">
+              <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
             </svg>
           </button>
         </th>
         <th>
           <button class="bx--table-sort-v2" data-event="sort">
             <span>Rule</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
+            <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5">
+              <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
             </svg>
           </button>
         </th>
         <th>
           <button class="bx--table-sort-v2" data-event="sort">
             <span>Attached Groups</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
+            <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5">
+              <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
             </svg>
           </button>
         </th>
         <th>
           <button class="bx--table-sort-v2" data-event="sort">
             <span>Status</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
+            <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5">
+              <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
             </svg>
           </button>
         </th>
@@ -142,11 +139,7 @@
         <td>
           <input data-event="select" id="bx--checkbox-91" class="bx--checkbox" type="checkbox" value="green" name="checkbox-13">
           <label for="bx--checkbox-91" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
+            <span class="bx--checkbox-appearance" />
           </label>
         </td>
         <td>Load Balancer 1</td>
@@ -157,10 +150,12 @@
         <td>Active</td>
         <td class="bx--table-overflow">
           <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
+            <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
+              <g fill-rule="evenodd">
+                <circle cx="1.5" cy="1.5" r="1.5" />
+                <circle cx="1.5" cy="7.5" r="1.5" />
+                <circle cx="1.5" cy="13.5" r="1.5" />
+              </g>
             </svg>
             <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
               <li class="bx--overflow-menu-options__option">
@@ -186,11 +181,7 @@
         <td>
           <input data-event="select" id="bx--checkbox-92" class="bx--checkbox" type="checkbox" value="green" name="checkbox-14">
           <label for="bx--checkbox-92" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
+            <span class="bx--checkbox-appearance" />
           </label>
         </td>
         <td>Load Balancer 5</td>
@@ -201,10 +192,12 @@
         <td>Active</td>
         <td class="bx--table-overflow">
           <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
+            <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
+              <g fill-rule="evenodd">
+                <circle cx="1.5" cy="1.5" r="1.5" />
+                <circle cx="1.5" cy="7.5" r="1.5" />
+                <circle cx="1.5" cy="13.5" r="1.5" />
+              </g>
             </svg>
             <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
               <li class="bx--overflow-menu-options__option">
@@ -230,11 +223,7 @@
         <td>
           <input data-event="select" id="bx--checkbox-93" class="bx--checkbox" type="checkbox" value="green" name="checkbox-15">
           <label for="bx--checkbox-93" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
+            <span class="bx--checkbox-appearance" />
           </label>
         </td>
         <td>Load Balancer 5</td>
@@ -245,10 +234,12 @@
         <td>Active</td>
         <td class="bx--table-overflow">
           <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
+            <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
+              <g fill-rule="evenodd">
+                <circle cx="1.5" cy="1.5" r="1.5" />
+                <circle cx="1.5" cy="7.5" r="1.5" />
+                <circle cx="1.5" cy="13.5" r="1.5" />
+              </g>
             </svg>
             <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
               <li class="bx--overflow-menu-options__option">
@@ -274,11 +265,7 @@
         <td>
           <input data-event="select" id="bx--checkbox-94" class="bx--checkbox" type="checkbox" value="green" name="checkbox-11">
           <label for="bx--checkbox-94" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
+            <span class="bx--checkbox-appearance" />
           </label>
         </td>
         <td>Load Balancer 5</td>
@@ -289,10 +276,12 @@
         <td>Active</td>
         <td class="bx--table-overflow">
           <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
+            <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
+              <g fill-rule="evenodd">
+                <circle cx="1.5" cy="1.5" r="1.5" />
+                <circle cx="1.5" cy="7.5" r="1.5" />
+                <circle cx="1.5" cy="13.5" r="1.5" />
+              </g>
             </svg>
             <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
               <li class="bx--overflow-menu-options__option">
@@ -318,11 +307,7 @@
         <td>
           <input data-event="select" id="bx--checkbox-95" class="bx--checkbox" type="checkbox" value="green" name="checkbox-12">
           <label for="bx--checkbox-95" class="bx--checkbox-label" aria-label="Label name">
-            <span class="bx--checkbox-appearance">
-              <svg class="bx--checkbox-checkmark" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
-                <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-              </svg>
-            </span>
+            <span class="bx--checkbox-appearance" />
           </label>
         </td>
         <td>Load Balancer 5</td>
@@ -333,10 +318,12 @@
         <td>Active</td>
         <td class="bx--table-overflow">
           <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
+            <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
+              <g fill-rule="evenodd">
+                <circle cx="1.5" cy="1.5" r="1.5" />
+                <circle cx="1.5" cy="7.5" r="1.5" />
+                <circle cx="1.5" cy="13.5" r="1.5" />
+              </g>
             </svg>
             <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
               <li class="bx--overflow-menu-options__option">
@@ -373,8 +360,8 @@
         <option class="bx--select-option" value="40">40</option>
         <option class="bx--select-option" value="50">50</option>
       </select>
-      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z"></path>
+      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
+        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
       </svg>
     </div>
     <span class="bx--pagination__text">
@@ -387,8 +374,8 @@
       <span data-displayed-page-number>1</span> of
       <span data-total-pages>4</span> pages</span>
     <button class="bx--pagination__button bx--pagination__button--backward" data-page-backward aria-label="Backward button">
-      <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
+      <svg class="bx--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
+        <path fill-rule="nonzero" d="M1.45 6.002L7 11.27l-.685.726L0 6.003 6.315 0 7 .726z" />
       </svg>
     </button>
     <label for="page-number-input" class="bx--visually-hidden">Page number input</label>
@@ -401,13 +388,13 @@
         <option class="bx--select-option" value="4">4</option>
         <option class="bx--select-option" value="5">5</option>
       </select>
-      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z"></path>
+      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
+        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
       </svg>
     </div>
     <button class="bx--pagination__button bx--pagination__button--forward" data-page-forward aria-label="Forward button">
-      <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+      <svg class="bx--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
+        <path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z" />
       </svg>
     </button>
   </div>
diff --git a/src/components/data-table-v2/data-table-v2.hbs b/src/components/data-table-v2/data-table-v2.hbs
index ff79b5e123c3..62b6c94c7d9f 100644
--- a/src/components/data-table-v2/data-table-v2.hbs
+++ b/src/components/data-table-v2/data-table-v2.hbs
@@ -5,22 +5,22 @@
       <div class="bx--action-list">
         <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
           Ghost
-          <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
+          <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16">
+            <path d="M7.5 7.5H4v1h3.5V12h1V8.5H12v-1H8.5V4h-1v3.5zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
           </svg>
         </button>
 
         <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
           Ghost
-          <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
+          <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16">
+            <path d="M7.5 7.5H4v1h3.5V12h1V8.5H12v-1H8.5V4h-1v3.5zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
           </svg>
         </button>
 
         <button class="bx--btn bx--btn--sm bx--btn--ghost" type="button">
           Ghost
-          <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm4 9H9v3H7V9H4V7h3V4h2v3h3v2z"></path>
+          <svg class="bx--btn__icon" width="16" height="16" viewBox="0 0 16 16">
+            <path d="M7.5 7.5H4v1h3.5V12h1V8.5H12v-1H8.5V4h-1v3.5zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="evenodd" />
           </svg>
         </button>
       </div>
@@ -33,16 +33,17 @@
 
     <div class="bx--toolbar-search-container">
       <div data-search class="bx--search bx--search--sm bx--search--light" role="search">
-        <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-          <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-          <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+        <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
+          <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
+            fill-rule="nonzero" />
         </svg>
         <label id="search-input-label-1" class="bx--label" for="search__input-2">Search</label>
         <input class="bx--search-input" type="text" id="search__input-2" role="search" placeholder="Search" aria-labelledby="search-input-label-1">
         <button class="bx--search-close bx--search-close--hidden" title="Clear search
         input" aria-label="Clear search input">
-          <svg width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-            <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"></path>
+          <svg width="16" height="16" viewBox="0 0 16 16">
+            <path d="M8 7.293L5.525 4.818l-.707.707L7.293 8l-2.475 2.475.707.707L8 8.707l2.475 2.475.707-.707L8.707 8l2.475-2.475-.707-.707L8 7.293zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
+              fill-rule="evenodd" />
           </svg>
         </button>
       </div>
@@ -83,48 +84,48 @@
         <th>
           <button class="bx--table-sort-v2" data-event="sort">
             <span class="bx--table-header-label">Name</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
+            <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5">
+              <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
             </svg>
           </button>
         </th>
         <th>
           <button class="bx--table-sort-v2" data-event="sort">
             <span>Protocol</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
+            <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5">
+              <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
             </svg>
           </button>
         </th>
         <th>
           <button class="bx--table-sort-v2" data-event="sort">
             <span>Something</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
+            <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5">
+              <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
             </svg>
           </button>
         </th>
         <th>
           <button class="bx--table-sort-v2" data-event="sort">
             <span>Rule</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
+            <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5">
+              <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
             </svg>
           </button>
         </th>
         <th>
           <button class="bx--table-sort-v2" data-event="sort">
             <span>Attached Groups</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
+            <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5">
+              <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
             </svg>
           </button>
         </th>
         <th>
           <button class="bx--table-sort-v2" data-event="sort">
             <span>Status</span>
-            <svg class="bx--table-sort-v2__icon" width='10' height='5' viewBox='0 0 10 5' fill-rule='evenodd'>
-              <path d='M10 0L5 5 0 0z'></path>
+            <svg class="bx--table-sort-v2__icon" width="10" height="5" viewBox="0 0 10 5">
+              <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
             </svg>
           </button>
         </th>
@@ -145,10 +146,12 @@
         <td>Active</td>
         <td class="bx--table-overflow">
           <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
+            <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
+              <g fill-rule="evenodd">
+                <circle cx="1.5" cy="1.5" r="1.5" />
+                <circle cx="1.5" cy="7.5" r="1.5" />
+                <circle cx="1.5" cy="13.5" r="1.5" />
+              </g>
             </svg>
             <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
               <li class="bx--overflow-menu-options__option">
@@ -183,10 +186,12 @@
         <td>Active</td>
         <td class="bx--table-overflow">
           <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
+            <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
+              <g fill-rule="evenodd">
+                <circle cx="1.5" cy="1.5" r="1.5" />
+                <circle cx="1.5" cy="7.5" r="1.5" />
+                <circle cx="1.5" cy="13.5" r="1.5" />
+              </g>
             </svg>
             <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
               <li class="bx--overflow-menu-options__option">
@@ -221,10 +226,12 @@
         <td>Active</td>
         <td class="bx--table-overflow">
           <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
+            <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
+              <g fill-rule="evenodd">
+                <circle cx="1.5" cy="1.5" r="1.5" />
+                <circle cx="1.5" cy="7.5" r="1.5" />
+                <circle cx="1.5" cy="13.5" r="1.5" />
+              </g>
             </svg>
             <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
               <li class="bx--overflow-menu-options__option">
@@ -259,10 +266,12 @@
         <td>Active</td>
         <td class="bx--table-overflow">
           <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
+            <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
+              <g fill-rule="evenodd">
+                <circle cx="1.5" cy="1.5" r="1.5" />
+                <circle cx="1.5" cy="7.5" r="1.5" />
+                <circle cx="1.5" cy="13.5" r="1.5" />
+              </g>
             </svg>
             <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
               <li class="bx--overflow-menu-options__option">
@@ -297,10 +306,12 @@
         <td>Active</td>
         <td class="bx--table-overflow">
           <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-            <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-              <circle cx="2" cy="2" r="2"></circle>
-              <circle cx="2" cy="10" r="2"></circle>
-              <circle cx="2" cy="18" r="2"></circle>
+            <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
+              <g fill-rule="evenodd">
+                <circle cx="1.5" cy="1.5" r="1.5" />
+                <circle cx="1.5" cy="7.5" r="1.5" />
+                <circle cx="1.5" cy="13.5" r="1.5" />
+              </g>
             </svg>
             <ul class="bx--overflow-menu-options bx--overflow-menu--flip">
               <li class="bx--overflow-menu-options__option">
diff --git a/src/components/date-picker/date-picker--range-light.hbs b/src/components/date-picker/date-picker--range-light.hbs
index a7cad332a453..ebabb55bcf8d 100644
--- a/src/components/date-picker/date-picker--range-light.hbs
+++ b/src/components/date-picker/date-picker--range-light.hbs
@@ -11,10 +11,9 @@
         data-date-picker-input-to />
       <label for="date-picker-2" class="bx--label">End date label</label>
     </div>
-    <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
-      <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
-      <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
-      <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
+    <svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
+      <path d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
+        fill-rule="nonzero" />
     </svg>
   </div>
 </div>
@@ -32,10 +31,9 @@
         data-date-picker-input-to />
       <label for="date-picker-2" class="bx--label">End date label</label>
     </div>
-    <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
-      <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
-      <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
-      <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
+    <svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
+      <path d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
+        fill-rule="nonzero" />
     </svg>
   </div>
 </div>
diff --git a/src/components/date-picker/date-picker--range.hbs b/src/components/date-picker/date-picker--range.hbs
index bfe33d0050d9..b5e51d4e7063 100644
--- a/src/components/date-picker/date-picker--range.hbs
+++ b/src/components/date-picker/date-picker--range.hbs
@@ -11,10 +11,9 @@
         data-date-picker-input-to />
       <label for="date-picker-2" class="bx--label">End date label</label>
     </div>
-    <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
-      <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
-      <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
-      <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
+    <svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
+      <path d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
+        fill-rule="nonzero" />
     </svg>
   </div>
 </div>
diff --git a/src/components/date-picker/date-picker--single-light.hbs b/src/components/date-picker/date-picker--single-light.hbs
index 8dc0e4dd2886..7790062ac4c9 100644
--- a/src/components/date-picker/date-picker--single-light.hbs
+++ b/src/components/date-picker/date-picker--single-light.hbs
@@ -2,10 +2,9 @@
 <div class="bx--form-item">
   <div data-date-picker data-date-picker-type="single" class="bx--date-picker bx--date-picker--single bx--date-picker--light">
     <div class="bx--date-picker-container">
-      <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
-        <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
-        <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
-        <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
+      <svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
+        <path d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
+          fill-rule="nonzero" />
       </svg>
       <input type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
         data-date-picker-input />
diff --git a/src/components/date-picker/date-picker--single.hbs b/src/components/date-picker/date-picker--single.hbs
index ddb127211e90..505ec8ab55db 100644
--- a/src/components/date-picker/date-picker--single.hbs
+++ b/src/components/date-picker/date-picker--single.hbs
@@ -2,10 +2,9 @@
 <div class="bx--form-item">
   <div data-date-picker data-date-picker-type="single" class="bx--date-picker bx--date-picker--single">
     <div class="bx--date-picker-container">
-      <svg data-date-picker-icon class="bx--date-picker__icon" width="17" height="19" viewBox="0 0 17 19">
-        <path d="M12 0h2v2.7h-2zM3 0h2v2.7H3z" />
-        <path d="M0 2v17h17V2H0zm15 15H2V7h13v10z" />
-        <path d="M9.9 15H8.6v-3.9H7.1v-.9c.9 0 1.7-.3 1.8-1.2h1v6z" />
+      <svg data-date-picker-icon class="bx--date-picker__icon" width="14" height="16" viewBox="0 0 14 16">
+        <path d="M0 5h14v1H0V5zm3-5h1v4H3V0zm7 0h1v4h-1V0zM0 2.5A1.5 1.5 0 0 1 1.5 1h11A1.5 1.5 0 0 1 14 2.5v12a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 0 14.5v-12zm1 0v12a.5.5 0 0 0 .5.5h11a.5.5 0 0 0 .5-.5v-12a.5.5 0 0 0-.5-.5h-11a.5.5 0 0 0-.5.5z"
+          fill-rule="nonzero" />
       </svg>
       <input type="text" id="date-picker-3" class="bx--date-picker__input" pattern="\d{1,2}/\d{1,2}/\d{4}" placeholder="mm/dd/yyyy"
         data-date-picker-input />
diff --git a/src/components/dropdown/dropdown.hbs b/src/components/dropdown/dropdown.hbs
index 144d6ce3eba2..d541ed84f886 100644
--- a/src/components/dropdown/dropdown.hbs
+++ b/src/components/dropdown/dropdown.hbs
@@ -1,18 +1,17 @@
-<ul data-dropdown{{#if inline}} data-dropdown-type="inline"{{/if}} data-value class="bx--dropdown{{#if up}} bx--dropdown--up{{/if}}{{#if light}} bx--dropdown--light{{/if}}{{#if inline}} bx--dropdown--inline{{/if}}" tabindex="0">
+<ul data-dropdown{{#if inline}} data-dropdown-type="inline" {{/if}} data-value class="bx--dropdown{{#if up}} bx--dropdown--up{{/if}}{{#if light}} bx--dropdown--light{{/if}}{{#if inline}} bx--dropdown--inline{{/if}}"
+  tabindex="0">
   <li class="bx--dropdown-text">
-    {{#unless inline}}
-      Dropdown label
-    {{else}}
-      <span class="bx--dropdown-text__inner">Inline Dropdown label</span>
-      <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z"></path>
-      </svg>
-    {{/unless}}
-  </li>
-  {{#unless inline}}
+    {{#unless inline}} Dropdown label {{else}}
+    <span class="bx--dropdown-text__inner">Inline Dropdown label</span>
     <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
       <path d="M10 0L5 5 0 0z"></path>
     </svg>
+    {{/unless}}
+  </li>
+  {{#unless inline}}
+  <svg class="bx--dropdown__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
+    <path d="M10 0L5 5 0 0z"></path>
+  </svg>
   {{/unless}}
   <li>
     <ul class="bx--dropdown-list">
diff --git a/src/components/form/form.hbs b/src/components/form/form.hbs
index 367ef15e33e4..d80641b2bdc9 100644
--- a/src/components/form/form.hbs
+++ b/src/components/form/form.hbs
@@ -20,8 +20,8 @@
         <option class="bx--select-option" value="option2">Option 2</option>
       </optgroup>
     </select>
-    <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-      <path d="M10 0L5 5 0 0z"></path>
+    <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
+      <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
     </svg>
     <label for="select-id" class="bx--label">Select label</label>
   </div>
diff --git a/src/components/modal/_modal.scss b/src/components/modal/_modal.scss
index b28eae0cf3d6..3675abff72c9 100644
--- a/src/components/modal/_modal.scss
+++ b/src/components/modal/_modal.scss
@@ -135,9 +135,6 @@
   }
 
   .#{$prefix}--modal-close__icon {
-    transition: 200ms;
     fill: $ui-05;
-    width: rem(12px);
-    height: rem(12px);
   }
 }
diff --git a/src/components/modal/modal.hbs b/src/components/modal/modal.hbs
index ecb6e01a88c9..8b7319fcb9e2 100644
--- a/src/components/modal/modal.hbs
+++ b/src/components/modal/modal.hbs
@@ -5,23 +5,27 @@
     <div class="bx--modal-header">
       <p class="bx--modal-header__label bx--type-delta">Optional label</p>
       <p class="bx--modal-header__heading bx--type-beta">Modal heading</p>
-      <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal"{{#unless hasFooter}} data-modal-primary-focus{{/unless}}>
-        <svg class="bx--modal-close__icon" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+      <button class="bx--modal-close" type="button" data-modal-close aria-label="close modal" {{#unless hasFooter}} data-modal-primary-focus{{/unless}}>
+        <svg class="bx--modal-close__icon" width="16" height="16" viewBox="0 0 16 16">
           <title>Close Modal</title>
-          <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+          <path d="M8.703 7.996l4.293 4.294-.706.706-4.294-4.293-4.293 4.293-.707-.706L7.29 7.996 2.996 3.703l.707-.707L7.996 7.29l4.294-4.294.706.707-4.293 4.293z"
+            fill-rule="nonzero" />
         </svg>
       </button>
     </div>
 
     <div class="bx--modal-content">
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi. Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum. </p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean id accumsan augue. Phasellus consequat augue vitae
+        tellus tincidunt posuere. Curabitur justo urna, consectetur vel elit iaculis, ultrices condimentum risus. Nulla facilisi.
+        Etiam venenatis molestie tellus. Quisque consectetur non risus eu rutrum. </p>
     </div>
 
     {{#if hasFooter}}
-      <div class="bx--modal-footer">
-        <button class="bx--btn {{classCloseButton}}" type="button" data-modal-close>Secondary button</button>
-        <button class="bx--btn {{classPrimaryButton}}" type="button" {{#if labelPrimaryButton}}aria-label="{{labelPrimaryButton}}"{{/if}} data-modal-primary-focus>Primary button</button>
-      </div>
+    <div class="bx--modal-footer">
+      <button class="bx--btn {{classCloseButton}}" type="button" data-modal-close>Secondary button</button>
+      <button class="bx--btn {{classPrimaryButton}}" type="button" {{#if labelPrimaryButton}}aria-label="{{labelPrimaryButton}}"
+        {{/if}} data-modal-primary-focus>Primary button</button>
+    </div>
     {{/if}}
   </div>
 </div>
diff --git a/src/components/multi-select/multi-select.hbs b/src/components/multi-select/multi-select.hbs
index bc1dcd8ce20b..fce432605695 100644
--- a/src/components/multi-select/multi-select.hbs
+++ b/src/components/multi-select/multi-select.hbs
@@ -2,9 +2,9 @@
   <div role="button" class="bx--list-box__field" tabindex="0" aria-label="open menu" aria-expanded="false" aria-haspopup="true">
     <span class="bx--list-box__label">Label</span>
     <div class="bx--list-box__menu-icon">
-      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Open menu">
+      <svg width="10" height="5" name="caret--down" role="img" viewBox="0 0 10 5" aria-label="Open menu">
         <title>Open menu</title>
-        <path d="M10 0L5 5 0 0z"></path>
+        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
       </svg>
     </div>
   </div>
@@ -13,9 +13,9 @@
   <div role="button" class="bx--list-box__field" tabindex="0" aria-label="close menu" aria-expanded="true" aria-haspopup="true">
     <span class="bx--list-box__label">Label</span>
     <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
-      <svg fill-rule="evenodd" height="5" name="caret--down" role="img" viewBox="0 0 10 5" width="10" aria-label="Close menu">
+      <svg width="10" height="5" name="caret--down" role="img" viewBox="0 0 10 5" aria-label="Close menu">
         <title>Close menu</title>
-        <path d="M10 0L5 5 0 0z"></path>
+        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
       </svg>
     </div>
   </div>
@@ -24,12 +24,7 @@
       <div class="bx--form-item bx--checkbox-wrapper">
         <label for="downshift-1-item-0" class="bx--checkbox-label">
           <input type="checkbox" name="Option 1" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-0" value="on">
-          <span class="bx--checkbox-appearance">
-            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
-              <title>Select this item</title>
-              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-            </svg>
-          </span>
+          <span class="bx--checkbox-appearance" />
           <span class="bx--checkbox-label-text">Option 1</span>
         </label>
       </div>
@@ -38,12 +33,7 @@
       <div class="bx--form-item bx--checkbox-wrapper">
         <label for="downshift-1-item-1" class="bx--checkbox-label">
           <input type="checkbox" name="Option 2" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-1" value="on">
-          <span class="bx--checkbox-appearance">
-            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
-              <title>Select this item</title>
-              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-            </svg>
-          </span>
+          <span class="bx--checkbox-appearance" />
           <span class="bx--checkbox-label-text">Option 2</span>
         </label>
       </div>
@@ -52,12 +42,7 @@
       <div class="bx--form-item bx--checkbox-wrapper">
         <label for="downshift-1-item-2" class="bx--checkbox-label">
           <input type="checkbox" name="Option 3" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-2" value="on">
-          <span class="bx--checkbox-appearance">
-            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
-              <title>Select this item</title>
-              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-            </svg>
-          </span>
+          <span class="bx--checkbox-appearance" />
           <span class="bx--checkbox-label-text">Option 3</span>
         </label>
       </div>
@@ -66,12 +51,7 @@
       <div class="bx--form-item bx--checkbox-wrapper">
         <label for="downshift-1-item-3" class="bx--checkbox-label">
           <input type="checkbox" name="Option 4" readonly="" tabindex="-1" class="bx--checkbox" id="downshift-1-item-3" value="on">
-          <span class="bx--checkbox-appearance">
-            <svg class="bx--checkbox-checkmark" fill-rule="evenodd" height="9" name="checkmark" role="img" viewBox="0 0 12 9" width="12" aria-label="Select this item">
-              <title>Select this item</title>
-              <path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
-            </svg>
-          </span>
+          <span class="bx--checkbox-appearance" />
           <span class="bx--checkbox-label-text">Option 4</span>
         </label>
       </div>
diff --git a/src/components/notification/inline-notification.hbs b/src/components/notification/inline-notification.hbs
index 3d0dfa0b5a42..24224eb79ea1 100644
--- a/src/components/notification/inline-notification.hbs
+++ b/src/components/notification/inline-notification.hbs
@@ -1,7 +1,7 @@
 <div data-notification class="bx--inline-notification bx--inline-notification--error" role="alert">
   <div class="bx--inline-notification__details">
-    <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM5.1 13.3L3.5 12 11 2.6l1.5 1.2-7.4 9.5z"></path>
+    <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16">
+      <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM4 4.65L11.35 12l.65-.65L4.65 4 4 4.65z" fill-rule="evenodd" />
     </svg>
     <div class="bx--inline-notification__text-wrapper">
       <p class="bx--inline-notification__title">Notification title</p>
@@ -9,16 +9,18 @@
     </div>
   </div>
   <button data-notification-btn class="bx--inline-notification__close-button" type="button">
-    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10">
+      <path d="M5.707 5L10 9.293 9.293 10 5 5.707.707 10 0 9.293 4.293 5 0 .707.707 0 5 4.293 9.293 0 10 .707 5.707 5z" fill-rule="nonzero"
+      />
     </svg>
   </button>
 </div>
 
 <div data-notification class="bx--inline-notification bx--inline-notification--info" aria-live="polite">
   <div class="bx--inline-notification__details">
-    <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 4c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm2 8H6v-1h1V8H6V7h3v4h1v1z"></path>
+    <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16">
+      <path d="M8.5 7.007h.005v-1h-2v1H7.5v3.991h-2v1h2V12h1v-.002h2v-1h-2V7.007zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zM8 4.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"
+        fill-rule="evenodd" />
     </svg>
     <div class="bx--inline-notification__text-wrapper">
       <p class="bx--inline-notification__title">Notification title</p>
@@ -26,16 +28,18 @@
     </div>
   </div>
   <button data-notification-btn class="bx--inline-notification__close-button" type="button">
-    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10">
+      <path d="M5.707 5L10 9.293 9.293 10 5 5.707.707 10 0 9.293 4.293 5 0 .707.707 0 5 4.293 9.293 0 10 .707 5.707 5z" fill-rule="nonzero"
+      />
     </svg>
   </button>
 </div>
 
 <div data-notification class="bx--inline-notification bx--inline-notification--success" aria-live="polite">
   <div class="bx--inline-notification__details">
-    <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z"></path>
+    <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16">
+      <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
+        fill-rule="evenodd" />
     </svg>
     <div class="bx--inline-notification__text-wrapper">
       <p class="bx--inline-notification__title">Notification title</p>
@@ -43,16 +47,18 @@
     </div>
   </div>
   <button data-notification-btn class="bx--inline-notification__close-button" type="button">
-    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10">
+      <path d="M5.707 5L10 9.293 9.293 10 5 5.707.707 10 0 9.293 4.293 5 0 .707.707 0 5 4.293 9.293 0 10 .707 5.707 5z" fill-rule="nonzero"
+      />
     </svg>
   </button>
 </div>
 
 <div data-notification class="bx--inline-notification bx--inline-notification--warning" role="alert">
   <div class="bx--inline-notification__details">
-    <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-      <path d="M8 1L0 15h16L8 1zm-.8 5h1.5v1.4L8.3 11h-.8l-.4-3.6V6h.1zm.8 8c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path>
+    <svg class="bx--inline-notification__icon" width="16" height="15" viewBox="0 0 16 15">
+      <path d="M.482 14.978a.5.5 0 0 1-.44-.735L7.497.244a.5.5 0 0 1 .881-.002l7.543 13.998a.5.5 0 0 1-.44.738h-15zm7.5-2.247a.749.749 0 1 0 0-1.497.749.749 0 0 0 0 1.497zm-.5-7.738v4.992h.999V4.993h-.998z"
+        fill-rule="evenodd" />
     </svg>
     <div class="bx--inline-notification__text-wrapper">
       <p class="bx--inline-notification__title">Notification title</p>
@@ -60,8 +66,9 @@
     </div>
   </div>
   <button data-notification-btn class="bx--inline-notification__close-button" type="button">
-    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10">
+      <path d="M5.707 5L10 9.293 9.293 10 5 5.707.707 10 0 9.293 4.293 5 0 .707.707 0 5 4.293 9.293 0 10 .707 5.707 5z" fill-rule="nonzero"
+      />
     </svg>
   </button>
 </div>
diff --git a/src/components/notification/toast-notification.hbs b/src/components/notification/toast-notification.hbs
index ac38035c43ab..341ae3bb3d5e 100644
--- a/src/components/notification/toast-notification.hbs
+++ b/src/components/notification/toast-notification.hbs
@@ -5,8 +5,9 @@
     <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
   </div>
   <button data-notification-btn class="bx--toast-notification__close-button" type="button">
-    <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+    <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10">
+      <path d="M5.707 5L10 9.293 9.293 10 5 5.707.707 10 0 9.293 4.293 5 0 .707.707 0 5 4.293 9.293 0 10 .707 5.707 5z" fill-rule="nonzero"
+      />
     </svg>
   </button>
 </div>
@@ -18,8 +19,9 @@
     <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
   </div>
   <button data-notification-btn class="bx--toast-notification__close-button" type="button">
-    <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+    <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10">
+      <path d="M5.707 5L10 9.293 9.293 10 5 5.707.707 10 0 9.293 4.293 5 0 .707.707 0 5 4.293 9.293 0 10 .707 5.707 5z" fill-rule="nonzero"
+      />
     </svg>
   </button>
 </div>
@@ -31,8 +33,9 @@
     <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
   </div>
   <button data-notification-btn class="bx--toast-notification__close-button" type="button">
-    <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+    <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10">
+      <path d="M5.707 5L10 9.293 9.293 10 5 5.707.707 10 0 9.293 4.293 5 0 .707.707 0 5 4.293 9.293 0 10 .707 5.707 5z" fill-rule="nonzero"
+      />
     </svg>
   </button>
 </div>
@@ -44,8 +47,9 @@
     <p class="bx--toast-notification__caption">Time stamp [00:00:00]</p>
   </div>
   <button data-notification-btn class="bx--toast-notification__close-button" type="button">
-    <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
-      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
+    <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10">
+      <path d="M5.707 5L10 9.293 9.293 10 5 5.707.707 10 0 9.293 4.293 5 0 .707.707 0 5 4.293 9.293 0 10 .707 5.707 5z" fill-rule="nonzero"
+      />
     </svg>
   </button>
 </div>
diff --git a/src/components/number-input/number-input.hbs b/src/components/number-input/number-input.hbs
index 230794993a22..7d5c3a19731e 100644
--- a/src/components/number-input/number-input.hbs
+++ b/src/components/number-input/number-input.hbs
@@ -2,13 +2,13 @@
   <div data-numberinput class="bx--number{{#if light}} bx--number--light{{/if}}">
     <div class="bx--number__controls">
       <button class="bx--number__control-btn up-icon">
-        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
-          <path d="M10 5L5 0 0 5z"></path>
+        <svg width="10" height="5" viewBox="0 0 10 5">
+          <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
         </svg>
       </button>
       <button class="bx--number__control-btn down-icon">
-        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
-          <path d="M10 0L5 5 0 0z"></path>
+        <svg width="10" height="5" viewBox="0 0 10 5">
+          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
         </svg>
       </button>
     </div>
@@ -22,13 +22,13 @@
     <input id="number-input" type="number" min="0" max="100" value="1">
     <div class="bx--number__controls">
       <button class="bx--number__control-btn up-icon">
-        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
-          <path d="M10 5L5 0 0 5z"></path>
+        <svg width="10" height="5" viewBox="0 0 10 5">
+          <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
         </svg>
       </button>
       <button class="bx--number__control-btn down-icon">
-        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
-          <path d="M10 0L5 5 0 0z"></path>
+        <svg width="10" height="5" viewBox="0 0 10 5">
+          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
         </svg>
       </button>
     </div>
@@ -44,13 +44,13 @@
     <input id="number-input" type="number" min="0" max="100" value="1">
     <div class="bx--number__controls">
       <button class="bx--number__control-btn up-icon">
-        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
-          <path d="M10 5L5 0 0 5z"></path>
+        <svg width="10" height="5" viewBox="0 0 10 5">
+          <path d="M0 5L5 .002 10 5z" fill-rule="evenodd" />
         </svg>
       </button>
       <button class="bx--number__control-btn down-icon">
-        <svg viewBox="0 2 10 5" width="10" height="5" fill-rule="evenodd">
-          <path d="M10 0L5 5 0 0z"></path>
+        <svg width="10" height="5" viewBox="0 0 10 5">
+          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
         </svg>
       </button>
     </div>
diff --git a/src/components/overflow-menu/_overflow-menu.scss b/src/components/overflow-menu/_overflow-menu.scss
index 296e6a5ff5b4..d3679a230db1 100644
--- a/src/components/overflow-menu/_overflow-menu.scss
+++ b/src/components/overflow-menu/_overflow-menu.scss
@@ -121,7 +121,6 @@
 
   .#{$prefix}--overflow-menu-options__option:hover .#{$prefix}--overflow-menu-options__btn {
     background-color: $hover-row;
-    color: $inverse-01;
     text-decoration: none;
   }
 
@@ -129,8 +128,14 @@
     border-top: 1px solid $ui-03;
   }
 
-  .#{$prefix}--overflow-menu-options__option--danger:hover {
-    background-color: $support-01;
+  .#{$prefix}--overflow-menu-options__option--danger {
+    .bx--overflow-menu-options__btn {
+      &:hover,
+      &:focus {
+        color: $inverse-01;
+        background-color: $support-01;
+      }
+    }
   }
 
   .#{$prefix}--overflow-menu-options__option--disabled:hover {
diff --git a/src/components/overflow-menu/overflow-menu.hbs b/src/components/overflow-menu/overflow-menu.hbs
index a1d7dda7af44..4e79e75d14bf 100644
--- a/src/components/overflow-menu/overflow-menu.hbs
+++ b/src/components/overflow-menu/overflow-menu.hbs
@@ -1,8 +1,10 @@
 <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-  <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-    <circle cx="2" cy="2" r="2"></circle>
-    <circle cx="2" cy="10" r="2"></circle>
-    <circle cx="2" cy="18" r="2"></circle>
+  <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
+    <g fill-rule="evenodd">
+      <circle cx="1.5" cy="1.5" r="1.5" />
+      <circle cx="1.5" cy="7.5" r="1.5" />
+      <circle cx="1.5" cy="13.5" r="1.5" />
+    </g>
   </svg>
   <ul class="bx--overflow-menu-options" tabindex="-1">
     <li class="bx--overflow-menu-options__option">
@@ -27,10 +29,12 @@
 </div>
 
 <div data-overflow-menu tabindex="0" aria-label="Overflow menu description" class="bx--overflow-menu">
-  <svg class="bx--overflow-menu__icon" width="4" height="20" viewBox="0 0 4 20" fill-rule="evenodd">
-    <circle cx="2" cy="2" r="2"></circle>
-    <circle cx="2" cy="10" r="2"></circle>
-    <circle cx="2" cy="18" r="2"></circle>
+  <svg class="bx--overflow-menu__icon" width="3" height="15" viewBox="0 0 3 15">
+    <g fill-rule="evenodd">
+      <circle cx="1.5" cy="1.5" r="1.5" />
+      <circle cx="1.5" cy="7.5" r="1.5" />
+      <circle cx="1.5" cy="13.5" r="1.5" />
+    </g>
   </svg>
   <ul class="bx--overflow-menu-options bx--overflow-menu--flip" tabindex="-1">
     <li class="bx--overflow-menu-options__option">
diff --git a/src/components/pagination/pagination.hbs b/src/components/pagination/pagination.hbs
index 5e69e4c09c61..e5c59d74f3b3 100644
--- a/src/components/pagination/pagination.hbs
+++ b/src/components/pagination/pagination.hbs
@@ -9,8 +9,8 @@
         <option class="bx--select-option" value="40">40</option>
         <option class="bx--select-option" value="50">50</option>
       </select>
-      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z"></path>
+      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
+        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd"/>
       </svg>
     </div>
     {{#isnt version "v2"}}
@@ -28,8 +28,8 @@
       <span data-displayed-page-number>1</span> of
       <span data-total-pages>4</span> pages</span>
     <button class="bx--pagination__button bx--pagination__button--backward" data-page-backward aria-label="Backward button">
-      <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M7.5 10.6L2.8 6l4.7-4.6L6.1 0 0 6l6.1 6z"></path>
+      <svg class="bx--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
+        <path fill-rule="nonzero" d="M1.45 6.002L7 11.27l-.685.726L0 6.003 6.315 0 7 .726z"/>
       </svg>
     </button>
     <label for="page-number-input" class="bx--visually-hidden">Page number input</label>
@@ -45,14 +45,14 @@
           <option class="bx--select-option" value="4">4</option>
           <option class="bx--select-option" value="5">5</option>
         </select>
-        <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-          <path d="M10 0L5 5 0 0z"></path>
+        <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
+          <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd"/>
         </svg>
       </div>
     {{/isnt}}
     <button class="bx--pagination__button bx--pagination__button--forward" data-page-forward aria-label="Forward button">
-      <svg class="bx--pagination__button-icon" width="8" height="12" viewBox="0 0 8 12" fill-rule="evenodd">
-        <path d="M0 10.6L4.7 6 0 1.4 1.4 0l6.1 6-6.1 6z"></path>
+      <svg class="bx--pagination__button-icon" width="7" height="12" viewBox="0 0 7 12">
+        <path fill-rule="nonzero" d="M5.569 5.994L0 .726.687 0l6.336 5.994-6.335 6.002L0 11.27z"/>
       </svg>
     </button>
   </div>
diff --git a/src/components/progress-indicator/_progress-indicator.scss b/src/components/progress-indicator/_progress-indicator.scss
index 95435f5f5c38..8a8c59a06cfd 100644
--- a/src/components/progress-indicator/_progress-indicator.scss
+++ b/src/components/progress-indicator/_progress-indicator.scss
@@ -45,6 +45,7 @@
     height: 1.5rem;
     border-radius: 50%;
     margin-bottom: $spacing-xs;
+    fill: $brand-01;
   }
 
   .#{$prefix}--progress-label {
@@ -59,10 +60,6 @@
       fill: transparent;
     }
 
-    circle:last-child {
-      fill: $brand-01;
-    }
-
     .#{$prefix}--progress-label {
       @include font-smoothing;
       color: $brand-01;
diff --git a/src/components/progress-indicator/progress-indicator.hbs b/src/components/progress-indicator/progress-indicator.hbs
index bf911ccd1a78..c1aaa1565122 100644
--- a/src/components/progress-indicator/progress-indicator.hbs
+++ b/src/components/progress-indicator/progress-indicator.hbs
@@ -1,8 +1,10 @@
 <ul data-progress data-progress-current class="bx--progress">
   <li class="bx--progress-step bx--progress-step--complete">
-    <svg width="24px" height="24px" viewBox="0 0 24 24">
-      <circle cx="12" cy="12" r="12"></circle>
-      <polygon points="10.3 13.6 7.7 11 6.3 12.4 10.3 16.4 17.8 9 16.4 7.6"></polygon>
+    <svg width="16" height="16" viewBox="0 0 16 16">
+      <g fill-rule="nonzero">
+        <path d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"/>
+        <path d="M11.646 5.146l.708.708-5.604 5.603-3.104-3.103.708-.708 2.396 2.397z"/>
+      </g>
     </svg>
     <p class="bx--progress-label">First step</p>
     <span class="bx--progress-line"></span>
diff --git a/src/components/search/_search.scss b/src/components/search/_search.scss
index dc75d7762d7e..d6ebab8f51e2 100644
--- a/src/components/search/_search.scss
+++ b/src/components/search/_search.scss
@@ -97,14 +97,10 @@
     outline-offset: 2px;
   }
 
-  .#{$prefix}--search--sm .#{$prefix}--search-close {
+  .#{$prefix}--search-close {
     right: 0.75rem;
   }
 
-  .#{$prefix}--search--lg .#{$prefix}--search-close {
-    right: rem(100px);
-  }
-
   .#{$prefix}--search--lg .#{$prefix}--search-close:last-child {
     right: rem(12px);
   }
diff --git a/src/components/search/search.hbs b/src/components/search/search.hbs
index 858757366e6d..02070cdfc6c3 100644
--- a/src/components/search/search.hbs
+++ b/src/components/search/search.hbs
@@ -1,34 +1,22 @@
-{{#is suffix "sm"}}<div class="bx--form-item">{{/is}}
+{{#is suffix "sm"}}
+<div class="bx--form-item">{{/is}}
   <div data-search class="bx--search bx--search--{{suffix}}{{#if light}} bx--search--light{{/if}}" role="search">
-    {{#is suffix "sm"}}<label id="search-input-label-1" class="bx--label" for="search__input-1">Search</label>{{/is}}
+    {{#is suffix "sm"}}
+    <label id="search-input-label-1" class="bx--label" for="search__input-1">Search</label>{{/is}}
     <input class="bx--search-input" type="text" role="search" id="search__input-1" placeholder="Search" aria-labelledby="search-input-label-2">
-    <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-      <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-      <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-    </svg>
-    <svg class="bx--search-close bx--search-close--hidden" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"></path>
+    <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
+      <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
+        fill-rule="nonzero" />
     </svg>
+    <button class="bx--search-close bx--search-close--hidden" title="Clear search
+        input" aria-label="Clear search input">
+      <svg width="16" height="16" viewBox="0 0 16 16">
+        <path d="M8 7.293L5.525 4.818l-.707.707L7.293 8l-2.475 2.475.707.707L8 8.707l2.475 2.475.707-.707L8.707 8l2.475-2.475-.707-.707L8 7.293zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
+          fill-rule="evenodd" />
+      </svg>
+    </button>
     {{#is suffix "lg"}}
-      <button class="bx--search-button" type="button" aria-label="Filter button">
-        <svg class="bx--search-filter" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-          <path d="M5 0C3.7 0 2.6.8 2.2 2H0v2h2.2C2.6 5.2 3.7 6 5 6c1.3 0 2.4-.8 2.8-2H16V2H7.8C7.4.8 6.3 0 5 0zm0 4c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zM5 10c-1.3 0-2.4.8-2.8 2H0v2h2.2c.4 1.2 1.5 2 2.8 2 1.3 0 2.4-.8 2.8-2H16v-2H7.8c-.4-1.2-1.5-2-2.8-2zm0 4c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path>
-          <path d="M11 5c-1.3 0-2.4.8-2.8 2H0v2h8.2c.4 1.2 1.5 2 2.8 2 1.3 0 2.4-.8 2.8-2H16V7h-2.2c-.4-1.2-1.5-2-2.8-2zm0 4c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path>
-        </svg>
-      </button>
-      <button class="bx--search-button" type="button" data-search-toggle aria-label="Grid and list toggle button">
-        <div data-search-view="grid">
-          <svg class="bx--search-view" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-            <path d="M0 0h7v7H0zM9 0h7v7H9zM0 9h7v7H0zM9 9h7v7H9z"></path>
-          </svg>
-        </div>
-        <div class="bx--search-view--hidden" data-search-view="list">
-          <svg class="bx--search-view" width="16" height="14" viewBox="0 0 16 14" fill-rule="evenodd">
-            <path d="M0 0h16v2H0zM0 4h16v2H0zM0 8h16v2H0zM0 12h16v2H0z"></path>
-          </svg>
-        </div>
-      </button>
-      <label class="bx--label" id="search-input-label-1" for="search__input-1">Search</label>
+    <label class="bx--label" id="search-input-label-1" for="search__input-1">Search</label>
     {{/is}}
   </div>
-{{#is suffix "sm"}}</div>{{/is}}
+  {{#is suffix "sm"}}</div>{{/is}}
diff --git a/src/components/select/select.hbs b/src/components/select/select.hbs
index ec0c58252332..9108cedc9670 100644
--- a/src/components/select/select.hbs
+++ b/src/components/select/select.hbs
@@ -1,7 +1,7 @@
 <div class="bx--form-item">
   <div class="bx--select{{#if inline}} bx--select--inline{{/if}}{{#if light}} bx--select--light{{/if}}">
     {{#if inline}}
-      <label for="select-id" class="bx--label">Select label</label>
+    <label for="select-id" class="bx--label">Select label</label>
     {{/if}}
     <select {{#if invalid}}data-invalid{{/if}} id="select-id" class="bx--select-input">
       <option class="bx--select-option" disabled selected hidden>Choose an option</option>
@@ -15,16 +15,15 @@
         <option class="bx--select-option" value="option2">Option 2</option>
       </optgroup>
     </select>
-    <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-      <path d="M10 0L5 5 0 0z"></path>
+    <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
+      <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
     </svg>
     {{#unless inline}}
-      <label for="select-id" class="bx--label">Select label</label>
-    {{/unless}}
-    {{#if invalid}}
-      <div class="bx--form-requirement">
-        Validation message here
-      </div>
+    <label for="select-id" class="bx--label">Select label</label>
+    {{/unless}} {{#if invalid}}
+    <div class="bx--form-requirement">
+      Validation message here
+    </div>
     {{/if}}
   </div>
 </div>
diff --git a/src/components/structured-list/structured-list--selection.hbs b/src/components/structured-list/structured-list--selection.hbs
index 34b857881a52..540813865eb6 100644
--- a/src/components/structured-list/structured-list--selection.hbs
+++ b/src/components/structured-list/structured-list--selection.hbs
@@ -12,54 +12,59 @@
       <input tabindex="-1" id="apache-id" class="bx--structured-list-input" value="apache spark" type="radio" name="services" title="apache spark"
         checked />
       <div class="bx--structured-list-td">
-        <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-          <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z">
-          </path>
+        <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16">
+          <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
+            fill-rule="evenodd" />
         </svg>
       </div>
       <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 1</div>
       <div class="bx--structured-list-td">Row 1</div>
       <div class="bx--structured-list-td">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+        posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.
       </div>
     </label>
     <label for="cloudant-id" aria-label="Cloudant" class="bx--structured-list-row" tabindex="0">
       <input tabindex="-1" id="cloudant-id" class="bx--structured-list-input" value="Cloudant" type="radio" name="services" title="Cloudant"
       />
       <div class="bx--structured-list-td">
-        <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-          <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z">
-          </path>
+        <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16">
+          <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
+            fill-rule="evenodd" />
         </svg>
       </div>
       <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 2</div>
       <div class="bx--structured-list-td">Row 2</div>
-      <div class="bx--structured-list-td">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.</div>
+      <div class="bx--structured-list-td">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue.
+        Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.</div>
     </label>
     <label for="block-storate-id" aria-label="Cloudant" class="bx--structured-list-row" tabindex="0">
       <input tabindex="-1" id="block-storate-id" class="bx--structured-list-input" value="block-storage" type="radio" name="services"
         title="block-storage" />
       <div class="bx--structured-list-td">
-        <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-          <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z">
-          </path>
+        <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16">
+          <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
+            fill-rule="evenodd" />
         </svg>
       </div>
       <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 3</div>
       <div class="bx--structured-list-td">Row 3</div>
-      <div class="bx--structured-list-td">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.</div>
+      <div class="bx--structured-list-td">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue.
+        Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.</div>
     </label>
     <label for="open-whisk-id" aria-label="Cloudant" class="bx--structured-list-row" tabindex="0">
-      <input tabindex="-1" id="open-whisk-id" class="bx--structured-list-input" value="open-whisk" type="radio" name="services" title="open-whisk" />
+      <input tabindex="-1" id="open-whisk-id" class="bx--structured-list-input" value="open-whisk" type="radio" name="services"
+        title="open-whisk" />
       <div class="bx--structured-list-td">
-        <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-          <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z">
-          </path>
+        <svg class="bx--structured-list-svg" width="16" height="16" viewBox="0 0 16 16">
+          <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
+            fill-rule="evenodd" />
         </svg>
       </div>
       <div class="bx--structured-list-td bx--structured-list-content--nowrap">Row 4</div>
       <div class="bx--structured-list-td">Row 4</div>
-      <div class="bx--structured-list-td">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.</div>
+      <div class="bx--structured-list-td">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue.
+        Aenean posuere sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque vulputate nisl a porttitor interdum.</div>
     </label>
   </div>
 </section>
diff --git a/src/components/tabs/tabs.hbs b/src/components/tabs/tabs.hbs
index af51243edca2..4ef96023cfa5 100644
--- a/src/components/tabs/tabs.hbs
+++ b/src/components/tabs/tabs.hbs
@@ -1,8 +1,8 @@
 <nav data-tabs class="bx--tabs" role="navigation">
   <div class="bx--tabs-trigger" tabindex="0">
     <a href="javascript:void(0)" class="bx--tabs-trigger-text" tabindex="-1"></a>
-    <svg width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-      <path d="M10 0L5 5 0 0z"></path>
+    <svg width="10" height="5" viewBox="0 0 10 5">
+      <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
     </svg>
   </div>
   <ul class="bx--tabs__nav bx--tabs__nav--hidden" role="tablist">
diff --git a/src/components/tile/tile--expandable.hbs b/src/components/tile/tile--expandable.hbs
index fa96b9246064..6dfb58b14e66 100644
--- a/src/components/tile/tile--expandable.hbs
+++ b/src/components/tile/tile--expandable.hbs
@@ -1,7 +1,7 @@
 <div data-tile="expandable" class="bx--tile bx--tile--expandable" tabindex="0">
   <button class="bx--tile__chevron">
-    <svg width="12" height="8" viewBox="0 0 12 8" fill-rule="evenodd">
-      <path d="M10.6 0L6 4.7 1.4 0 0 1.4l6 6.1 6-6.1z"></path>
+    <svg width="12" height="7" viewBox="0 0 12 7">
+      <path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
     </svg>
   </button>
   <div class="bx--tile-content">
diff --git a/src/components/tile/tile--grid.hbs b/src/components/tile/tile--grid.hbs
index 582e2a8255bc..00c7ce95c5c9 100644
--- a/src/components/tile/tile--grid.hbs
+++ b/src/components/tile/tile--grid.hbs
@@ -5,8 +5,8 @@
       <div class="bx--col bx--col-md-12">
         <div data-tile="expandable" class="bx--tile bx--tile--expandable" tabindex="0">
           <button class="bx--tile__chevron">
-            <svg width="12" height="8" viewBox="0 0 12 8" fill-rule="evenodd">
-              <path d="M10.6 0L6 4.7 1.4 0 0 1.4l6 6.1 6-6.1z"></path>
+            <svg width="12" height="7" viewBox="0 0 12 7">
+              <path fill-rule="nonzero" d="M6.002 5.55L11.27 0l.726.685L6.003 7 0 .685.726 0z" />
             </svg>
           </button>
           <div class="bx--tile-content">
@@ -25,27 +25,31 @@
     <div class="bx--row">
       <div class="bx--col bx--col-sm-6 bx--col-xs-6">
         <label for="tile-id-1" aria-label="tile" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
-          <input tabindex="-1" id="tile-id-1" class="bx--tile-input" data-tile-input value="tile" type="checkbox" name="tiles" title="tile" />
+          <input tabindex="-1" id="tile-id-1" class="bx--tile-input" data-tile-input value="tile" type="checkbox" name="tiles" title="tile"
+          />
           <div class="bx--tile__checkmark">
-            <svg width='16' height='16' viewBox='0 0 16 16' fill-rule='evenodd'>
-              <path d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z'></path>
+            <svg width="16" height="16" viewBox="0 0 16 16">
+              <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
+                fill-rule="evenodd" />
             </svg>
           </div>
           <div class="bx--tile-content">
-          <!-- Tile content here -->
+            <!-- Tile content here -->
           </div>
         </label>
       </div>
       <div class="bx--col bx--col-sm-6 bx--col-xs-6">
         <label for="tile-id-2" aria-label="tile-2" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
-          <input tabindex="-1" id="tile-id-2" class="bx--tile-input" data-tile-input value="tile-2" type="checkbox" name="tiles" title="tile-2" />
+          <input tabindex="-1" id="tile-id-2" class="bx--tile-input" data-tile-input value="tile-2" type="checkbox" name="tiles" title="tile-2"
+          />
           <div class="bx--tile__checkmark">
-            <svg width='16' height='16' viewBox='0 0 16 16' fill-rule='evenodd'>
-              <path d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z'></path>
+            <svg width="16" height="16" viewBox="0 0 16 16">
+              <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
+                fill-rule="evenodd" />
             </svg>
           </div>
           <div class="bx--tile-content">
-          <!-- Tile content here -->
+            <!-- Tile content here -->
           </div>
         </label>
       </div>
diff --git a/src/components/tile/tile--selectable.hbs b/src/components/tile/tile--selectable.hbs
index cb9f39feac8d..625030d7c580 100644
--- a/src/components/tile/tile--selectable.hbs
+++ b/src/components/tile/tile--selectable.hbs
@@ -1,11 +1,13 @@
 <label for="tile-id" aria-label="tile" class="bx--tile bx--tile--selectable" data-tile="selectable" tabindex="0">
-  <input tabindex="-1" data-tile-input id="tile-id" class="bx--tile-input" value="tile" type="checkbox" name="tiles" title="tile" />
+  <input tabindex="-1" data-tile-input id="tile-id" class="bx--tile-input" value="tile" type="checkbox" name="tiles" title="tile"
+  />
   <div class="bx--tile__checkmark">
-    <svg width='16' height='16' viewBox='0 0 16 16' fill-rule='evenodd'>
-      <path d='M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z'></path>
+    <svg width="16" height="16" viewBox="0 0 16 16">
+      <path d="M8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16zm3.646-10.854L6.75 10.043 4.354 7.646l-.708.708 3.104 3.103 5.604-5.603-.708-.708z"
+        fill-rule="evenodd" />
     </svg>
   </div>
   <div class="bx--tile-content">
-  <!-- Tile content here -->
+    <!-- Tile content here -->
   </div>
 </label>
diff --git a/src/components/time-picker/time-picker--light.hbs b/src/components/time-picker/time-picker--light.hbs
index ccbbb91f3792..5bb6b49cde72 100644
--- a/src/components/time-picker/time-picker--light.hbs
+++ b/src/components/time-picker/time-picker--light.hbs
@@ -14,8 +14,8 @@
         <option class="bx--select-option" value="AM">AM</option>
         <option class="bx--select-option" value="PM">PM</option>
       </select>
-      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z"></path>
+      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
+        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
       </svg>
     </div>
     <div class="bx--time-picker__select bx--select bx--select--inline">
@@ -25,8 +25,8 @@
         <option class="bx--select-option" value="option-2">Timezone 2</option>
         <option class="bx--select-option" value="option-3">Timezone 3</option>
       </select>
-      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z"></path>
+      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
+        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
       </svg>
     </div>
   </div>
diff --git a/src/components/time-picker/time-picker.hbs b/src/components/time-picker/time-picker.hbs
index 96bf430dd25c..21f6d029c96d 100644
--- a/src/components/time-picker/time-picker.hbs
+++ b/src/components/time-picker/time-picker.hbs
@@ -14,8 +14,8 @@
         <option class="bx--select-option" value="AM">AM</option>
         <option class="bx--select-option" value="PM">PM</option>
       </select>
-      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z"></path>
+      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
+        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
       </svg>
     </div>
     <div class="bx--time-picker__select bx--select bx--select--inline">
@@ -25,8 +25,8 @@
         <option class="bx--select-option" value="option-2">Timezone 2</option>
         <option class="bx--select-option" value="option-3">Timezone 3</option>
       </select>
-      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5" fill-rule="evenodd">
-        <path d="M10 0L5 5 0 0z"></path>
+      <svg class="bx--select__arrow" width="10" height="5" viewBox="0 0 10 5">
+        <path d="M0 0l5 4.998L10 0z" fill-rule="evenodd" />
       </svg>
     </div>
   </div>
diff --git a/src/components/toolbar/toolbar.hbs b/src/components/toolbar/toolbar.hbs
index af54d59a0eb5..2ece5929670d 100644
--- a/src/components/toolbar/toolbar.hbs
+++ b/src/components/toolbar/toolbar.hbs
@@ -1,20 +1,27 @@
 <div class="bx--toolbar" data-toolbar>
   <div class="bx--search bx--search--sm bx--toolbar-search" role="search" data-search data-toolbar-search>
     <label for="search__input" class="bx--label">Search</label>
-    <input type="search" class="bx--search-input" id="search__input" placeholder="Search">
+    <input type="text" class="bx--search-input" id="search__input" placeholder="Search">
     <button class="bx--toolbar-search__btn" aria-label="Toolbar search">
-      <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-        <path d="M6 2c2.2 0 4 1.8 4 4s-1.8 4-4 4-4-1.8-4-4 1.8-4 4-4zm0-2C2.7 0 0 2.7 0 6s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6zM16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
-        <path d="M16 13.8L13.8 16l-3.6-3.6 2.2-2.2z"></path>
+      <svg class="bx--search-magnifier" width="16" height="16" viewBox="0 0 16 16">
+        <path d="M6.5 12a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm4.936-1.27l4.563 4.557-.707.708-4.563-4.558a6.5 6.5 0 1 1 .707-.707z"
+          fill-rule="nonzero" />
+      </svg>
+    </button>
+    <button class="bx--search-close bx--search-close--hidden" title="Clear search
+        input" aria-label="Clear search input">
+      <svg width="16" height="16" viewBox="0 0 16 16">
+        <path d="M8 7.293L5.525 4.818l-.707.707L7.293 8l-2.475 2.475.707.707L8 8.707l2.475 2.475.707-.707L8.707 8l2.475-2.475-.707-.707L8 7.293zM8 16A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
+          fill-rule="evenodd" />
       </svg>
     </button>
-    <svg class="bx--search-close bx--search-close--hidden" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm3.5 10.1l-1.4 1.4L8 9.4l-2.1 2.1-1.4-1.4L6.6 8 4.5 5.9l1.4-1.4L8 6.6l2.1-2.1 1.4 1.4L9.4 8l2.1 2.1z"></path>
-    </svg>
   </div>
   <div data-overflow-menu class="bx--overflow-menu" tabindex="0" aria-label="List of options">
-    <svg class="bx--overflow-menu__icon bx--toolbar-filter-icon" width="24" height="24" viewBox="0 0 24 24" fill-rule="evenodd">
-      <path d="M10.9 3c-.4-1.7-2-3-3.9-3S3.6 1.3 3.1 3H0v2h3.1c.4 1.7 2 3 3.9 3s3.4-1.3 3.9-3H24V3H10.9zM7 5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zM17 8c-1.9 0-3.4 1.3-3.9 3H0v2h13.1c.4 1.7 2 3 3.9 3s3.4-1.3 3.9-3H24v-2h-3.1c-.5-1.7-2-3-3.9-3zm0 5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1zM7 16c-1.9 0-3.4 1.3-3.9 3H0v2h3.1c.4 1.7 2 3 3.9 3s3.4-1.3 3.9-3H24v-2H10.9c-.5-1.7-2-3-3.9-3zm0 5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path>
+    <svg class="bx--overflow-menu__icon bx--toolbar-filter-icon" width="16" height="12" viewBox="0 0 16 12">
+      <g fill-rule="nonzero">
+        <path d="M8.05 2a2.5 2.5 0 0 1 4.9 0H16v1h-3.05a2.5 2.5 0 0 1-4.9 0H0V2h8.05zm2.45 2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM3.05 9a2.5 2.5 0 0 1 4.9 0H16v1H7.95a2.5 2.5 0 0 1-4.9 0H0V9h3.05zm2.45 2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
+        />
+      </g>
     </svg>
     <ul class="bx--overflow-menu-options">
       <li class="bx--toolbar-menu__title">FILTER BY</li>
diff --git a/src/components/tooltip/tooltip--icon.hbs b/src/components/tooltip/tooltip--icon.hbs
index e3d277f25a09..64468f20557b 100644
--- a/src/components/tooltip/tooltip--icon.hbs
+++ b/src/components/tooltip/tooltip--icon.hbs
@@ -1,9 +1,10 @@
 <div class="bx--tooltip--icon">
   <div tabindex="0" class="bx--tooltip__trigger bx--tooltip--icon__bottom" data-tooltip-text="Filter">
-    <svg width="16px" height="16px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill-rule="evenodd">
-    	<path d="M10.9,3 C10.5,1.3 8.9,0 7,0 C5.1,0 3.6,1.3 3.1,3 L0,3 L0,5 L3.1,5 C3.5,6.7 5.1,8 7,8 C8.9,8 10.4,6.7 10.9,5 L24,5 L24,3 L10.9,3 L10.9,3 Z M7,5 C6.4,5 6,4.6 6,4 C6,3.4 6.4,3 7,3 C7.6,3 8,3.4 8,4 C8,4.6 7.6,5 7,5 L7,5 Z"></path>
-    	<path d="M17,8 C15.1,8 13.6,9.3 13.1,11 L0,11 L0,13 L13.1,13 C13.5,14.7 15.1,16 17,16 C18.9,16 20.4,14.7 20.9,13 L24,13 L24,11 L20.9,11 C20.4,9.3 18.9,8 17,8 L17,8 Z M17,13 C16.4,13 16,12.6 16,12 C16,11.4 16.4,11 17,11 C17.6,11 18,11.4 18,12 C18,12.6 17.6,13 17,13 L17,13 Z"></path>
-    	<path d="M7,16 C5.1,16 3.6,17.3 3.1,19 L0,19 L0,21 L3.1,21 C3.5,22.7 5.1,24 7,24 C8.9,24 10.4,22.7 10.9,21 L24,21 L24,19 L10.9,19 C10.4,17.3 8.9,16 7,16 L7,16 Z M7,21 C6.4,21 6,20.6 6,20 C6,19.4 6.4,19 7,19 C7.6,19 8,19.4 8,20 C8,20.6 7.6,21 7,21 L7,21 Z"></path>
+    <svg width="16" height="12" viewBox="0 0 16 12">
+      <g fill-rule="nonzero">
+        <path d="M8.05 2a2.5 2.5 0 0 1 4.9 0H16v1h-3.05a2.5 2.5 0 0 1-4.9 0H0V2h8.05zm2.45 2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3zM3.05 9a2.5 2.5 0 0 1 4.9 0H16v1H7.95a2.5 2.5 0 0 1-4.9 0H0V9h3.05zm2.45 2a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"
+        />
+      </g>
     </svg>
   </div>
 </div>
diff --git a/src/components/tooltip/tooltip.hbs b/src/components/tooltip/tooltip.hbs
index 5d9d57090aea..350adb119027 100644
--- a/src/components/tooltip/tooltip.hbs
+++ b/src/components/tooltip/tooltip.hbs
@@ -1,16 +1,19 @@
 <div class="bx--tooltip__label" aria-describedby="unique-tooltip">
   Tooltip Label
   <div tabindex="0" data-tooltip-trigger data-tooltip-target="#unique-tooltip" role="tooltip" class="bx--tooltip__trigger">
-    <svg width="16" height="16" viewBox="0 0 24 24" fill-rule="evenodd">
-      <path d="M12 2c5.5 0 10 4.5 10 10s-4.5 10-10 10S2 17.5 2 12 6.5 2 12 2zm0-2C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0z"/>
-      <path d="M14 10H9v2h2v4H9v2h7v-2h-2z"/>
-      <circle cx="12.5" cy="7.5" r="1.5"/>
+    <svg width="16" height="16" viewBox="0 0 16 16">
+      <g fill-rule="evenodd">
+        <path d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14zm0 1A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" fill-rule="nonzero" />
+        <path d="M8.5 7.007v3.991h2v1h-2V12h-1v-.002h-2v-1h2V7.007h-.995v-1h2v1H8.5z" fill-rule="nonzero" />
+        <circle cx="8" cy="4" r="1" />
+      </g>
     </svg>
   </div>
 </div>
 <div id="unique-tooltip" data-floating-menu-direction="bottom" class="bx--tooltip">
   <span class="bx--tooltip__caret"></span>
-  <p>This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed please use a modal instead.</p>
+  <p>This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed
+    please use a modal instead.</p>
   <div>
     <a href="#" class="bx--link">Learn More</a>
     <button class="bx--btn bx--btn--primary" type="button">Create</button>