diff --git a/_layouts/search.html b/_layouts/search.html
index fcd61fac..c58ceb15 100644
--- a/_layouts/search.html
+++ b/_layouts/search.html
@@ -61,14 +61,14 @@
 
 		<div id="button-example-plugin" class="sui-tooltip" data-tooltip="Example Plugin">
 			<a href="https://bitbucket.org/incsub/shared-ui-example-plugin" target="_blank" class="sui-button-icon sui-button-outlined sui-button-lg">
-				<i class="sui-icon-plugin-2" aria-hidden="true"></i>
+				<span class="sui-icon-plugin-2" aria-hidden="true"></span>
 				<span class="sui-screen-reader-text">Click to open example plugin on a new tab.</span>
 			</a>
 		</div>
 
 		<div id="button-github-repository" class="sui-tooltip" data-tooltip="Github Repository">
 			<a href="https://github.com/wpmudev/shared-ui" target="_blank" class="sui-button-icon sui-button-outlined sui-button-lg">
-				<i class="sui-icon-social-github" aria-hidden="true"></i>
+				<span class="sui-icon-social-github" aria-hidden="true"></span>
 				<span class="sui-screen-reader-text">Click to open Github Repository on a new tab.</span>
 			</a>
 		</div>
diff --git a/assets/js/shared-ui/multistrings.js b/assets/js/shared-ui/multistrings.js
index 45a07ed2..9b3df027 100644
--- a/assets/js/shared-ui/multistrings.js
+++ b/assets/js/shared-ui/multistrings.js
@@ -155,10 +155,10 @@
 
 			html += '<li title="' + itemName + '">';
 
-				html += '<i class="sui-icon-page sui-sm" aria-hidden="true"></i>';
+				html += '<span class="sui-icon-page sui-sm" aria-hidden="true"></span>';
 				html += itemName;
 				html += '<button class="sui-button-close">';
-					html += '<i class="sui-icon-close" aria-hidden="true"></i>';
+					html += '<span class="sui-icon-close" aria-hidden="true"></span>';
 					html += '<span class="sui-screen-reader-text">Delete</span>';
 				html += '</button>';
 
diff --git a/assets/js/shared-ui/notifications.js b/assets/js/shared-ui/notifications.js
index 6f887de3..67e61c5b 100644
--- a/assets/js/shared-ui/notifications.js
+++ b/assets/js/shared-ui/notifications.js
@@ -159,7 +159,7 @@
 
 						innerHTML += '<button class="sui-button-icon">';
 
-							innerHTML += '<i class="sui-icon-check" aria-hidden="true"></i>';
+							innerHTML += '<span class="sui-icon-check" aria-hidden="true"></span>';
 
 							if ( '' !== dismiss.label ) {
 								innerHTML += '<span class="sui-screen-reader-text">' + dismiss.label + '</span>';
diff --git a/assets/js/showcase/pages/icons.js b/assets/js/showcase/pages/icons.js
index b97479a4..bf0602d7 100644
--- a/assets/js/showcase/pages/icons.js
+++ b/assets/js/showcase/pages/icons.js
@@ -112,7 +112,7 @@
 								'<div class="sui-with-button sui-with-button-icon">' +
 									'<input type="text" value="&lt;span class=&quot;sui-icon-' + iconName + '&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;" class="sui-form-control" readonly="readonly" />' +
 									'<button role="button" class="sui-button-icon icon-item-code--html" data-clipboard-text="&lt;span class=&quot;sui-icon-' + iconName + '&quot; aria-hidden=&quot;true&quot;&gt;&lt;/span&gt;">' +
-										'<i aria-hidden="true" class="sui-icon-copy"></i>' +
+										'<span aria-hidden="true" class="sui-icon-copy"></span>' +
 										'<span class="sui-screen-reader-text">Copy HTML code</span>' +
 									'</button>' +
 								'</div>' +
@@ -122,7 +122,7 @@
 								'<div class="sui-with-button sui-with-button-icon">' +
 									'<input type="text" value="@include icon(before, ' + iconName + ', true);" class="sui-form-control" readonly="readonly" />' +
 									'<button role="button" class="sui-button-icon icon-item-code--scss" data-clipboard-text="@include icon(before, ' + iconName + ', true);">' +
-										'<i aria-hidden="true" class="sui-icon-copy"></i>' +
+										'<span aria-hidden="true" class="sui-icon-copy"></span>' +
 										'<span class="sui-screen-reader-text">Copy HTML code</span>' +
 									'</button>' +
 								'</div>' +
diff --git a/page-icon-buttons.html b/page-icon-buttons.html
index 315784d8..fd1a1681 100644
--- a/page-icon-buttons.html
+++ b/page-icon-buttons.html
@@ -832,8 +832,8 @@ <h2 class="sui-box-title">Colorize Buttons</h2>
 							<span class="sui-settings-label" style="margin-bottom: 10px;">Default</span>
 
 							<button role="button" class="sui-button-icon sui-button-white">
-								<i class="sui-icon-close" aria-hidden="true"></i>
-								<i class="sui-screen-reader-text">Icon Button</i>
+								<span class="sui-icon-close" aria-hidden="true"></span>
+								<span class="sui-screen-reader-text">Icon Button</span>
 							</button>
 
 							<div class="demo-code-block" style="margin-top: 10px;">
@@ -855,8 +855,8 @@ <h2 class="sui-box-title">Colorize Buttons</h2>
 							<span class="sui-settings-label" style="margin-bottom: 10px;">Outlined</span>
 
 							<button role="button" class="sui-button-icon sui-button-white sui-button-outlined">
-								<i class="sui-icon-close" aria-hidden="true"></i>
-								<i class="sui-screen-reader-text">Icon Button</i>
+								<span class="sui-icon-close" aria-hidden="true"></span>
+								<span class="sui-screen-reader-text">Icon Button</span>
 							</button>
 
 							<div class="demo-code-block" style="margin-top: 10px;">
@@ -878,8 +878,8 @@ <h2 class="sui-box-title">Colorize Buttons</h2>
 							<span class="sui-settings-label" style="margin-bottom: 10px;">Large</span>
 
 							<button role="button" class="sui-button-icon sui-button-white sui-button-lg">
-								<i class="sui-icon-close" aria-hidden="true"></i>
-								<i class="sui-screen-reader-text">Icon Button</i>
+								<span class="sui-icon-close" aria-hidden="true"></span>
+								<span class="sui-screen-reader-text">Icon Button</span>
 							</button>
 
 							<div class="demo-code-block" style="margin-top: 10px;">
@@ -901,7 +901,7 @@ <h2 class="sui-box-title">Colorize Buttons</h2>
 							<span class="sui-settings-label" style="margin-bottom: 10px;">Disabled</span>
 
 							<button role="button" class="sui-button-icon sui-button-white" disabled>
-								<i class="sui-icon-close" aria-hidden="true"></i>
+								<span class="sui-icon-close" aria-hidden="true"></span>
 								<span class="sui-screen-reader-text">Icon Button</span>
 							</button>
 
@@ -951,7 +951,7 @@ <h2 class="sui-box-title">Loading Button</h2>
 
 					<button type="button" class="sui-button-icon">
 						<span class="sui-loading-text" aria-hidden="true">
-							<span class="sui-icon-academy"></span>
+							<span class="sui-icon-academy" aria-hidden="true"></span>
 						</span>
 						<span class="sui-icon-loader sui-loading" aria-hidden="true"></span>
 						<span class="sui-screen-reader-text">Icon Button</span>
@@ -984,7 +984,7 @@ <h2 class="sui-box-title">Loading Button</h2>
 
 					<button type="button" class="sui-button-icon sui-button-onload">
 						<span class="sui-loading-text" aria-hidden="true">
-							<span class="sui-icon-academy"></span>
+							<span class="sui-icon-academy" aria-hidden="true"></span>
 						</span>
 						<span class="sui-icon-loader sui-loading" aria-hidden="true"></span>
 						<span class="sui-screen-reader-text">Icon Button</span>
diff --git a/page-select.html b/page-select.html
index ffd3c2d8..f3f40095 100644
--- a/page-select.html
+++ b/page-select.html
@@ -55,13 +55,13 @@ <h2 class="sui-box-title">Examples</h2>
 						type="button"
 						class="sui-button-icon sui-tabs-navigation--left"
 					>
-						<i class="sui-icon-chevron-left"></i>
+						<span class="sui-icon-chevron-left" aria-hidden="true"></span>
 					</button>
 					<button
 						type="button"
 						class="sui-button-icon sui-tabs-navigation--right"
 					>
-						<i class="sui-icon-chevron-right"></i>
+						<span class="sui-icon-chevron-right" aria-hidden="true"></span>
 					</button>
 				</div>
 
@@ -559,13 +559,13 @@ <h2 class="sui-box-title">Usage</h2>
 						type="button"
 						class="sui-button-icon sui-tabs-navigation--left"
 					>
-						<i class="sui-icon-chevron-left"></i>
+						<span class="sui-icon-chevron-left" aria-hidden="true"></span>
 					</button>
 					<button
 						type="button"
 						class="sui-button-icon sui-tabs-navigation--right"
 					>
-						<i class="sui-icon-chevron-right"></i>
+						<span class="sui-icon-chevron-right" aria-hidden="true"></span>
 					</button>
 				</div>