diff --git a/app/main.css b/app/main.css
index 0b9bf723..6a42290e 100644
--- a/app/main.css
+++ b/app/main.css
@@ -175,6 +175,14 @@ footer li a:hover {
   display: block;
 }
 
+.d-inline-block {
+  display: inline-block;
+}
+
+.align-middle {
+  vertical-align: middle;
+}
+
 .main {
   display: flex;
   position: relative;
diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js
index e8d77900..84ecf1f6 100644
--- a/app/ui/archiveTile.js
+++ b/app/ui/archiveTile.js
@@ -587,8 +587,7 @@ module.exports.preview = function(state, emit) {
           <svg
             width="30"
             height="30"
-            class="m-2 mr-3"
-            style="display: inline-block; vertical-align: middle;"
+            class="m-2 mr-3 d-inline-block align-middle"
           >
             <image
               xlink:href="${assets.get('thunderbird-icon.svg')}"
diff --git a/app/ui/home.js b/app/ui/home.js
index 4215fcb1..86550ff4 100644
--- a/app/ui/home.js
+++ b/app/ui/home.js
@@ -40,8 +40,7 @@ module.exports = function(state, emit) {
         <svg
           width="30"
           height="30"
-          class="m-2 mr-3"
-          style="display: inline-block; vertical-align: middle;"
+          class="m-2 mr-3 d-inline-block align-middle"
         >
           <image
             xlink:href="${assets.get('thunderbird-icon.svg')}"
diff --git a/app/ui/intro.js b/app/ui/intro.js
index 6fdbfd43..9a53c404 100644
--- a/app/ui/intro.js
+++ b/app/ui/intro.js
@@ -22,8 +22,7 @@ module.exports = function intro(state) {
           <svg
             width="30"
             height="30"
-            class="m-2 mr-3"
-            style="display: inline-block; vertical-align: middle;"
+            class="m-2 mr-3 d-inline-block align-middle"
           >
             <image
               xlink:href="${assets.get('thunderbird-icon.svg')}"