diff --git a/phpBB/styles/prosilver/template/icons/font.html b/phpBB/styles/prosilver/template/icons/font.html
index 488d434fa9..21b211a234 100644
--- a/phpBB/styles/prosilver/template/icons/font.html
+++ b/phpBB/styles/prosilver/template/icons/font.html
@@ -1,6 +1,6 @@
 {% spaceless %}
 <i
-	class="icon fa-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES) }}"
+	class="o-icon font fa-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES) }}"
 	{% if S_HIDDEN %}
 		{% if TITLE %}title="{{ lang(TITLE) }}"{% endif %}
 		aria-hidden="true"
diff --git a/phpBB/styles/prosilver/template/icons/png.html b/phpBB/styles/prosilver/template/icons/png.html
index dafdece71e..f20a88fe6d 100644
--- a/phpBB/styles/prosilver/template/icons/png.html
+++ b/phpBB/styles/prosilver/template/icons/png.html
@@ -1,6 +1,6 @@
 {% spaceless %}
 <img
-	class="icon png-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES) }}"
+	class="o-icon png png-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES) }}"
 	src="{{ SOURCE }}"
 	alt="{{ lang(TITLE) }}"
 	{{ ATTRIBUTES }}
diff --git a/phpBB/styles/prosilver/template/icons/svg.html b/phpBB/styles/prosilver/template/icons/svg.html
index 67339b6ea2..c12aa8fe63 100644
--- a/phpBB/styles/prosilver/template/icons/svg.html
+++ b/phpBB/styles/prosilver/template/icons/svg.html
@@ -1,7 +1,8 @@
 {% spaceless %}
 	{% set TITLE_ID = TITLE ? TITLE|lower|replace({' ': '-'}) ~ '-' ~ random() %}
 <svg
-	class="icon svg-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES) }}"
+	class="o-icon svg svg-{{ ICON ~ (CLASSES ? ' ' ~ CLASSES) }}"
+	xmlns="http://www.w3.org/2000/svg"
 	viewBox="0 0 24 24"
 	{% if TITLE %}
 		{% if S_HIDDEN %}aria-hidden="true"{% endif %}
diff --git a/phpBB/styles/prosilver/theme/icons.css b/phpBB/styles/prosilver/theme/icons.css
index 5a2e288e3d..2338310b9b 100644
--- a/phpBB/styles/prosilver/theme/icons.css
+++ b/phpBB/styles/prosilver/theme/icons.css
@@ -14,6 +14,7 @@ svg {
  * Just change the name of the font after the 14/1 to the name of
  * the font you wish to use.
  */
+.o-icon,
 .icon,
 .button .icon,
 blockquote cite:before,
@@ -32,42 +33,46 @@ blockquote cite:before,
 	text-rendering: auto; /* optimizelegibility throws things off #1094 */
 }
 
-img.icon,
-svg.icon {
+.o-icon.png,
+.o-icon.svg {
+	vertical-align: middle;
 	width: 14px;
 	height: 14px;
-	display: inline-block;
-	vertical-align: middle;
 }
 
+.o-icon:before,
 .icon:before {
 	padding-right: 2px;
 }
 
+.button .o-icon:before,
 .button .icon:before {
 	padding-right: 0;
 }
 
 /* Icon size classes - Default size is 14px, use these for small variations */
-
+.o-icon.icon-xl,
 .icon.icon-xl {
 	font-size: 20px;
 	width: 20px;
 	height: 20px;
 }
 
+.o-icon.icon-lg,
 .icon.icon-lg {
 	font-size: 16px;
 	width: 16px;
 	height: 16px;
 }
 
+.o-icon.icon-md,
 .icon.icon-md {
 	font-size: 10px;
 	width: 10px;
 	height: 10px;
 }
 
+.o-icon.icon-sm,
 .icon.icon-sm {
 	font-size: 8px;
 	width: 8px;