diff --git a/components/dropdown/metadata/dropdown.yml b/components/dropdown/metadata/dropdown.yml
index dc80dcc6713..6baf6f8312a 100644
--- a/components/dropdown/metadata/dropdown.yml
+++ b/components/dropdown/metadata/dropdown.yml
@@ -26,26 +26,26 @@ examples:
           <ul class="spectrum-Menu" role="listbox">
             <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
               <span class="spectrum-Menu-itemLabel">Ballard</span>
-              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
               </svg>
             </li>
             <li class="spectrum-Menu-item" role="option" tabindex="0">
               <span class="spectrum-Menu-itemLabel">Fremont</span>
-              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
               </svg>
             </li>
             <li class="spectrum-Menu-item" role="option" tabindex="0">
               <span class="spectrum-Menu-itemLabel">Greenwood</span>
-              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
               </svg>
             </li>
             <li class="spectrum-Menu-divider" role="separator"></li>
             <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
               <span class="spectrum-Menu-itemLabel">United States of America</span>
-              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
               </svg>
             </li>
@@ -69,39 +69,39 @@ examples:
         <div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover is-open" style="width: 100%">
           <ul class="spectrum-Menu" role="listbox">
             <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
-              <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
+              <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
                 <use xlink:href="#spectrum-icon-18-Image" />
               </svg>
               <span class="spectrum-Menu-itemLabel">Ballard</span>
-              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
               </svg>
             </li>
             <li class="spectrum-Menu-item" role="option" tabindex="0">
-              <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
+              <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
                 <use xlink:href="#spectrum-icon-18-Image" />
               </svg>
               <span class="spectrum-Menu-itemLabel">Fremont</span>
-              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
               </svg>
             </li>
             <li class="spectrum-Menu-item" role="option" tabindex="0">
-              <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
+              <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
                 <use xlink:href="#spectrum-icon-18-Image" />
               </svg>
               <span class="spectrum-Menu-itemLabel">Greenwood</span>
-              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
               </svg>
             </li>
             <li class="spectrum-Menu-divider" role="separator"></li>
             <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
-              <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
+              <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
                 <use xlink:href="#spectrum-icon-18-Image" />
               </svg>
               <span class="spectrum-Menu-itemLabel">United States of America</span>
-              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
               </svg>
             </li>
@@ -149,26 +149,26 @@ examples:
           <ul class="spectrum-Menu" role="listbox">
             <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
               <span class="spectrum-Menu-itemLabel">Ballard</span>
-              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
               </svg>
             </li>
             <li class="spectrum-Menu-item" role="option" tabindex="0">
               <span class="spectrum-Menu-itemLabel">Fremont</span>
-              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
               </svg>
             </li>
             <li class="spectrum-Menu-item" role="option" tabindex="0">
               <span class="spectrum-Menu-itemLabel">Greenwood</span>
-              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
               </svg>
             </li>
             <li class="spectrum-Menu-divider" role="separator"></li>
             <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
               <span class="spectrum-Menu-itemLabel">United States of America</span>
-              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+              <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                 <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
               </svg>
             </li>
@@ -217,26 +217,26 @@ examples:
         <ul class="spectrum-Menu" role="listbox">
           <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
             <span class="spectrum-Menu-itemLabel">Ballard</span>
-            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
             </svg>
           </li>
           <li class="spectrum-Menu-item" role="option" tabindex="0">
             <span class="spectrum-Menu-itemLabel">Fremont</span>
-            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
             </svg>
           </li>
           <li class="spectrum-Menu-item" role="option" tabindex="0">
             <span class="spectrum-Menu-itemLabel">Greenwood</span>
-            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
             </svg>
           </li>
           <li class="spectrum-Menu-divider" role="separator"></li>
           <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
             <span class="spectrum-Menu-itemLabel">United States of America</span>
-            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
             </svg>
           </li>
@@ -260,39 +260,39 @@ examples:
       <div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover spectrum-Dropdown-popover--quiet is-open" style="display: block;">
         <ul class="spectrum-Menu" role="listbox">
           <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
-            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
+            <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
               <use xlink:href="#spectrum-icon-18-Image" />
             </svg>
             <span class="spectrum-Menu-itemLabel">Ballard</span>
-            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
             </svg>
           </li>
           <li class="spectrum-Menu-item" role="option" tabindex="0">
-            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
+            <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
               <use xlink:href="#spectrum-icon-18-Image" />
             </svg>
             <span class="spectrum-Menu-itemLabel">Fremont</span>
-            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
             </svg>
           </li>
           <li class="spectrum-Menu-item" role="option" tabindex="0">
-            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
+            <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
               <use xlink:href="#spectrum-icon-18-Image" />
             </svg>
             <span class="spectrum-Menu-itemLabel">Greenwood</span>
-            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
             </svg>
           </li>
           <li class="spectrum-Menu-divider" role="separator"></li>
           <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
-            <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
+            <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
               <use xlink:href="#spectrum-icon-18-Image" />
             </svg>
             <span class="spectrum-Menu-itemLabel">United States of America</span>
-            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
             </svg>
           </li>
@@ -340,26 +340,26 @@ examples:
         <ul class="spectrum-Menu" role="listbox">
           <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
             <span class="spectrum-Menu-itemLabel">Ballard</span>
-            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
             </svg>
           </li>
           <li class="spectrum-Menu-item" role="option" tabindex="0">
             <span class="spectrum-Menu-itemLabel">Fremont</span>
-            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
             </svg>
           </li>
           <li class="spectrum-Menu-item" role="option" tabindex="0">
             <span class="spectrum-Menu-itemLabel">Greenwood</span>
-            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
             </svg>
           </li>
           <li class="spectrum-Menu-divider" role="separator"></li>
           <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
             <span class="spectrum-Menu-itemLabel">United States of America</span>
-            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
             </svg>
           </li>
diff --git a/components/menu/index.css b/components/menu/index.css
index 7e2c9a853e2..ca8969031e7 100644
--- a/components/menu/index.css
+++ b/components/menu/index.css
@@ -99,13 +99,15 @@ governing permissions and limitations under the License.
     }
   }
 
-  .spectrum-Icon {
+  .spectrum-Icon,
+  .spectrum-Menu-itemIcon {
     /* Don't get smaller, you're an icon! */
     flex-shrink: 0;
     align-self: flex-start;
   }
 
-  .spectrum-Icon + .spectrum-Menu-itemLabel {
+  .spectrum-Icon + .spectrum-Menu-itemLabel,
+  .spectrum-Menu-itemIcon  + .spectrum-Menu-itemLabel {
     margin-left: var(--spectrum-selectlist-thumbnail-image-padding-x);
   }
 }
diff --git a/components/menu/metadata/menu.yml b/components/menu/metadata/menu.yml
index 0f271a70aaf..7a1df14eea4 100644
--- a/components/menu/metadata/menu.yml
+++ b/components/menu/metadata/menu.yml
@@ -47,13 +47,13 @@ examples:
             <span class="spectrum-Menu-sectionHeading" id="menu-heading-category-2"  aria-hidden="true">Section Heading</span>
             <ul class="spectrum-Menu" role="group" aria-labelledby="menu-heading-category-1" aria-disabled="true">
               <li class="spectrum-Menu-item" role="menuitem" tabindex="0">
-                <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="SaveFloppy">
+                <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="SaveFloppy">
                   <use xlink:href="#spectrum-icon-18-SaveFloppy"></use>
                 </svg>
                 <span class="spectrum-Menu-itemLabel">Save</span>
               </li>
               <li class="spectrum-Menu-item is-disabled" role="menuitem" aria-disabled="true">
-                <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="DataDownload">
+                <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="DataDownload">
                   <use xlink:href="#spectrum-icon-18-DataDownload"></use>
                 </svg>
                 <span class="spectrum-Menu-itemLabel">Download</span>
@@ -89,7 +89,7 @@ examples:
               </li>
               <li class="spectrum-Menu-item is-selected" role="option" tabindex="0">
                 <span class="spectrum-Menu-itemLabel">My best friend's mom's house in the burbs just off Silverado street</span>
-                <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+                <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
                   <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
                 </svg>
               </li>
@@ -112,7 +112,7 @@ examples:
           </li>
           <li class="spectrum-Menu-item is-open" role="menuitem" tabindex="0">
             <span class="spectrum-Menu-itemLabel">Feather...</span>
-            <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-Menu-chevron" focusable="false" aria-hidden="true" aria-label="Next">
+            <svg class="spectrum-Icon spectrum-UIIcon-ChevronRightMedium spectrum-Menu-chevron spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Next">
               <use xlink:href="#spectrum-css-icon-ChevronRightMedium" />
             </svg>
           </li>
diff --git a/components/tabs/metadata/tabs.yml b/components/tabs/metadata/tabs.yml
index 54aa7779bd0..ab92ab30988 100644
--- a/components/tabs/metadata/tabs.yml
+++ b/components/tabs/metadata/tabs.yml
@@ -379,7 +379,7 @@ examples:
         <ul class="spectrum-Menu" role="listbox">
           <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
             <span class="spectrum-Menu-itemLabel">Tab 1</span>
-            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
             </svg>
           </li>
@@ -430,7 +430,7 @@ examples:
         <ul class="spectrum-Menu" role="listbox">
           <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
             <span class="spectrum-Menu-itemLabel">Tab 1</span>
-            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark" focusable="false" aria-hidden="true">
+            <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
               <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
             </svg>
           </li>
diff --git a/site/templates/siteComponent.pug b/site/templates/siteComponent.pug
index 46f65d91789..b61c4221b5f 100644
--- a/site/templates/siteComponent.pug
+++ b/site/templates/siteComponent.pug
@@ -77,19 +77,19 @@ html(lang='en-US').spectrum.spectrum--light.spectrum--medium
                     ul.spectrum-Menu(role='listbox')
                       li.spectrum-Menu-item(role='option' aria-selected='true' tabindex='0' value="lightest")
                         span.spectrum-Menu-itemLabel Lightest
-                        svg.spectrum-Icon.spectrum-UIIcon-CheckmarkMedium.spectrum-Menu-checkmark(focusable='false' aria-hidden='true')
+                        svg.spectrum-Icon.spectrum-UIIcon-CheckmarkMedium.spectrum-Menu-checkmark.spectrum-Menu-itemIcon(focusable='false' aria-hidden='true')
                           use(xlink:href='#spectrum-css-icon-CheckmarkMedium')
                       li.spectrum-Menu-item.is-selected(role='option' tabindex='0' value="light")
                         span.spectrum-Menu-itemLabel Light
-                        svg.spectrum-Icon.spectrum-UIIcon-CheckmarkMedium.spectrum-Menu-checkmark(focusable='false' aria-hidden='true')
+                        svg.spectrum-Icon.spectrum-UIIcon-CheckmarkMedium.spectrum-Menu-checkmark.spectrum-Menu-itemIcon(focusable='false' aria-hidden='true')
                           use(xlink:href='#spectrum-css-icon-CheckmarkMedium')
                       li.spectrum-Menu-item(role='option' tabindex='0' value="dark")
                         span.spectrum-Menu-itemLabel Dark
-                        svg.spectrum-Icon.spectrum-UIIcon-CheckmarkMedium.spectrum-Menu-checkmark(focusable='false' aria-hidden='true')
+                        svg.spectrum-Icon.spectrum-UIIcon-CheckmarkMedium.spectrum-Menu-checkmark.spectrum-Menu-itemIcon(focusable='false' aria-hidden='true')
                           use(xlink:href='#spectrum-css-icon-CheckmarkMedium')
                       li.spectrum-Menu-item(role='option' tabindex='0' value="darkest")
                         span.spectrum-Menu-itemLabel Darkest
-                        svg.spectrum-Icon.spectrum-UIIcon-CheckmarkMedium.spectrum-Menu-checkmark(focusable='false' aria-hidden='true')
+                        svg.spectrum-Icon.spectrum-UIIcon-CheckmarkMedium.spectrum-Menu-checkmark.spectrum-Menu-itemIcon(focusable='false' aria-hidden='true')
                           use(xlink:href='#spectrum-css-icon-CheckmarkMedium')
               div.spectrum-CSS-switcherContainer
                 label.spectrum-FieldLabel.spectrum-FieldLabel--left(for='switcher-scale') Scale
@@ -103,11 +103,11 @@ html(lang='en-US').spectrum.spectrum--light.spectrum--medium
                     ul.spectrum-Menu(role='listbox')
                       li.spectrum-Menu-item.is-selected(role='option' aria-selected='true' tabindex='0' value="medium")
                         span.spectrum-Menu-itemLabel Medium
-                        svg.spectrum-Icon.spectrum-UIIcon-CheckmarkMedium.spectrum-Menu-checkmark(focusable='false' aria-hidden='true')
+                        svg.spectrum-Icon.spectrum-UIIcon-CheckmarkMedium.spectrum-Menu-checkmark.spectrum-Menu-itemIcon(focusable='false' aria-hidden='true')
                           use(xlink:href='#spectrum-css-icon-CheckmarkMedium')
                       li.spectrum-Menu-item(role='option' tabindex='0' value="large")
                         span.spectrum-Menu-itemLabel Large
-                        svg.spectrum-Icon.spectrum-UIIcon-CheckmarkMedium.spectrum-Menu-checkmark(focusable='false' aria-hidden='true')
+                        svg.spectrum-Icon.spectrum-UIIcon-CheckmarkMedium.spectrum-Menu-checkmark.spectrum-Menu-itemIcon(focusable='false' aria-hidden='true')
                           use(xlink:href='#spectrum-css-icon-CheckmarkMedium')
 
             header(id=component.slug).spectrum-CSSComponent-heading