diff --git a/package.json b/package.json
index 2686180..5344d02 100644
--- a/package.json
+++ b/package.json
@@ -32,6 +32,7 @@
     "@vue/test-utils": "1.0.0-beta.33",
     "babel-jest": "25.5.1",
     "cross-env": "7.0.2",
+    "ionicons": "5.1.2",
     "jest": "24.9.0",
     "pm2": "4.4.0",
     "serve": "11.3.0",
diff --git a/pages/index.vue b/pages/index.vue
index c26c6c9..24d4ed1 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -5,13 +5,19 @@
         <ion-title>Ionic Nuxt App</ion-title>
       </ion-toolbar>
     </ion-header>
-    <Logo/>
+    <Logo />
     <ion-content class="content">
       <ion-card>
         <ion-card-subtitle>Ololo</ion-card-subtitle>
         <ion-card-title>Trololo</ion-card-title>
         <ion-card-content>
           <h1>Hololo!</h1>
+          <h1>
+            Hello
+            <ion-icon :src="heartOutline"></ion-icon
+            ><ion-icon :src="heart"></ion-icon
+            ><ion-icon :src="heartHalf"></ion-icon>
+          </h1>
         </ion-card-content>
       </ion-card>
     </ion-content>
@@ -19,11 +25,19 @@
 </template>
 
 <script>
-  import Logo from '~/components/Logo.vue';
+import Logo from "~/components/Logo.vue";
+import { heartOutline, heart, heartHalf } from "ionicons/icons";
 
-  export default {
-    components: {
-      Logo,
-    },
-  };
+export default {
+  components: {
+    Logo
+  },
+  data: () => {
+    return {
+      heartOutline,
+      heart,
+      heartHalf
+    };
+  }
+};
 </script>