diff --git a/package.json b/package.json
index f59510eebae135594c1c3cfc557a7a34603b0261..4e7236c1f0fcc1c4d134a479e05999454767956c 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "vue": "^2.1.10",
     "vue-loader": "^10.1.2",
     "vue-template-compiler": "^2.1.10",
+    "vuex": "^2.1.1",
     "webpack": "^2.2.0",
     "webpack-dev-server": "^1.16.2"
   }
diff --git a/src/App.vue b/src/App.vue
index ef8ccb007ca1dee34b87b7046a53749b4a594b7e..095f60b14e30300e0fa5f765e91c750d7edea747 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -3,7 +3,11 @@
 </template>
 
 <script>
+  import {mapState} from 'vuex';
+
   export default {
-    name: 'App'
+    name: 'App',
+    components: {Icon},
+    computed: mapState(['icons'])
   }
 </script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 6609247a597b94466123787e8d4b0e14f003dda5..eb40bcc6b1c0e1e434cde2924dbe83c65c71e500 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,14 +1,28 @@
 import Vue from 'vue';
+import Vuex from 'vuex';
 import App from './App';
 
-const data = {
-  icons: [
-    'square',
-    'circle',
-    'rectangle-vertical',
-    'rectangle-horizontal'
-  ]
-};
+const icons = [
+  'square',
+  'circle',
+  'rectangle-vertical',
+  'rectangle-horizontal'
+];
+
+Vue.use(Vuex);
+
+const store = new Vuex.Store({
+  state: {
+    icons
+  }
+});
+
+new Vue({
+  el: '#app',
+  store,
+  components: {App},
+  template: '<app/>'
+});
 
 // Vue.component('icon', {
 //   props: {
@@ -55,9 +69,5 @@ const data = {
 //   template: '#icon-container-template'
 // })
 
-new Vue({
-  el: '#app',
-  data: data,
-  components: {App},
-  template: '<app/>'
-});
\ No newline at end of file
+
+