diff --git a/js/forum/src/components/WelcomeHero.js b/js/forum/src/components/WelcomeHero.js
index 53b09f132..c51dd45da 100644
--- a/js/forum/src/components/WelcomeHero.js
+++ b/js/forum/src/components/WelcomeHero.js
@@ -1,5 +1,5 @@
 import Component from 'flarum/Component';
-import icon from 'flarum/helpers/icon';
+import Button from 'flarum/components/Button';
 
 /**
  * The `WelcomeHero` component displays a hero that welcomes the user to the
@@ -22,9 +22,11 @@ export default class WelcomeHero extends Component {
     return (
       <header className="Hero WelcomeHero">
         <div class="container">
-          <button className="Hero-close Button Button--icon Button--link" onclick={slideUp}>
-            {icon('times')}
-          </button>
+          {Button.component({
+            icon: 'times',
+            onclick: slideUp,
+            className: 'Hero-close Button Button--icon Button--link'
+          })}
 
           <div className="containerNarrow">
             <h2 className="Hero-title">{app.forum.attribute('welcomeTitle')}</h2>
diff --git a/less/forum/Hero.less b/less/forum/Hero.less
index 629aac1b1..5ffaa4397 100644
--- a/less/forum/Hero.less
+++ b/less/forum/Hero.less
@@ -19,6 +19,7 @@
   float: right;
   margin-top: -10px;
   color: inherit;
+  opacity: 0.5;
 }
 .Hero-subtitle {
   margin: 8px 0 0;