diff --git a/src/client/pages/page.vue b/src/client/pages/page.vue
index a7e0f748ed..d55596ae7d 100644
--- a/src/client/pages/page.vue
+++ b/src/client/pages/page.vue
@@ -17,8 +17,8 @@
 			</template>
 			<router-link :to="`./${page.name}/view-source`">{{ $t('_pages.viewSource') }}</router-link>
 			<div class="like">
-				<button @click="unlike()" v-if="page.isLiked" :title="$t('_pages.unlike')"><fa :icon="faHeartS"/></button>
-				<button @click="like()" v-else :title="$t('_pages.like')"><fa :icon="faHeart"/></button>
+				<button class="_button" @click="unlike()" v-if="page.isLiked" :title="$t('_pages.unlike')"><fa :icon="faHeartS"/></button>
+				<button class="_button" @click="like()" v-else :title="$t('_pages.like')"><fa :icon="faHeartR"/></button>
 				<span class="count" v-if="page.likedCount > 0">{{ page.likedCount }}</span>
 			</div>
 		</div>
@@ -28,6 +28,8 @@
 
 <script lang="ts">
 import Vue from 'vue';
+import { faHeart as faHeartS } from '@fortawesome/free-solid-svg-icons';
+import { faHeart as faHeartR } from '@fortawesome/free-regular-svg-icons';
 import XPage from '../components/page/page.vue';
 
 export default Vue.extend({
@@ -49,6 +51,7 @@ export default Vue.extend({
 	data() {
 		return {
 			page: null,
+			faHeartS, faHeartR
 		};
 	},