diff --git a/package-lock.json b/package-lock.json
index 4236311cd..a673d6128 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,11 +11,44 @@
         "regenerator-runtime": "^0.13.2"
       }
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "0.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz",
+      "integrity": "sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw=="
+    },
     "@fortawesome/fontawesome-free": {
       "version": "5.15.1",
       "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-5.15.1.tgz",
-      "integrity": "sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ==",
-      "dev": true
+      "integrity": "sha512-OEdH7SyC1suTdhBGW91/zBfR6qaIhThbcN8PUXtXilY4GYnSBbVqOntdHbC1vXwsDnX0Qix2m2+DSU1J51ybOQ=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "1.2.35",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz",
+      "integrity": "sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      }
+    },
+    "@fortawesome/free-brands-svg-icons": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-5.15.3.tgz",
+      "integrity": "sha512-1hirPcbjj72ZJtFvdnXGPbAbpn3Ox6mH3g5STbANFp3vGSiE5u5ingAKV06mK6ZVqNYxUPlh4DlTnaIvLtF2kw==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "5.15.3",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz",
+      "integrity": "sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "^0.2.35"
+      }
+    },
+    "@fortawesome/vue-fontawesome": {
+      "version": "0.1.10",
+      "resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-0.1.10.tgz",
+      "integrity": "sha512-b2+SLF31h32LSepVcXe+BQ63yvbq5qmTCy4KfFogCYm2bn68H5sDWUnX+U7MBqnM2aeEk9M7xSoqGnu+wSdY6w=="
     },
     "@nuxt/opencollective": {
       "version": "0.3.2",
@@ -36,6 +69,14 @@
         "vue": "^2.5.16"
       }
     },
+    "@rightbraintechbd/vue-awesome-icon-picker": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@rightbraintechbd/vue-awesome-icon-picker/-/vue-awesome-icon-picker-1.1.0.tgz",
+      "integrity": "sha512-7O01yWD2h/s4SeT3sB7UUfuSRBBaQm7csx/4NFjtt2vnlmbFIBuK5e8SFb6i7S4CdhdjeXUAdPOP8CiZcSg22Q==",
+      "requires": {
+        "@fortawesome/fontawesome-free": "^5.13.0"
+      }
+    },
     "@types/chart.js": {
       "version": "2.9.28",
       "resolved": "https://registry.npmjs.org/@types/chart.js/-/chart.js-2.9.28.tgz",
@@ -1487,6 +1528,16 @@
         "vue-functional-data-merge": "^3.1.0"
       }
     },
+    "bootstrap-vue-font-awesome-picker": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/bootstrap-vue-font-awesome-picker/-/bootstrap-vue-font-awesome-picker-0.1.3.tgz",
+      "integrity": "sha512-gTji5kl03tw7rEjDi+YrY1JmsPPmD3kiu36VKkyZTjskgSStab8WY4qBL+RIKw3VegWCidkcZV6DukpD9FvEow==",
+      "requires": {
+        "bootstrap": "^4.4.1",
+        "vue": "^2.6.11",
+        "vue-click-outside": "^1.0.7"
+      }
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -2137,6 +2188,11 @@
         "color-name": "~1.1.4"
       }
     },
+    "color-fns": {
+      "version": "0.0.10",
+      "resolved": "https://registry.npmjs.org/color-fns/-/color-fns-0.0.10.tgz",
+      "integrity": "sha512-QFKowTE9CXCLp09Gz5cQo8VPUP55hf73iHEI52JC3NyKfMpQG2VoLWmTxYeTKH6ngkEnoMrCdEX//M6J4PVQBA=="
+    },
     "color-name": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
@@ -4606,7 +4662,6 @@
       "version": "2.2.4",
       "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz",
       "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==",
-      "dev": true,
       "requires": {
         "loose-envify": "^1.0.0"
       }
@@ -4952,8 +5007,7 @@
     "js-tokens": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
-      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
-      "dev": true
+      "integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
     },
     "js-yaml": {
       "version": "3.7.0",
@@ -5306,7 +5360,6 @@
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
       "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
-      "dev": true,
       "requires": {
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
@@ -8611,6 +8664,11 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
       "dev": true
     },
+    "pure-color": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/pure-color/-/pure-color-1.3.0.tgz",
+      "integrity": "sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4="
+    },
     "q": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -10661,6 +10719,26 @@
       "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
       "dev": true
     },
+    "v-color": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/v-color/-/v-color-1.1.2.tgz",
+      "integrity": "sha512-C3lbi9wjAnR4OVV41R73setGfdDAALcpv0u38vEqOpQY4nP7Tc7VyY2j/iUyKcSfOqczETas/xqIjeNvI7aHXQ==",
+      "requires": {
+        "invariant": "^2.2.4",
+        "lodash": "^4.17.10",
+        "object-assign": "^4.1.1",
+        "pure-color": "^1.3.0",
+        "v-ctrl": "^1.1.0"
+      }
+    },
+    "v-ctrl": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/v-ctrl/-/v-ctrl-1.1.0.tgz",
+      "integrity": "sha1-1hj6Id0Skchi9VbTIiSJ5+ngiqg=",
+      "requires": {
+        "lodash": "^4.17.4"
+      }
+    },
     "validate-npm-package-license": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
@@ -10704,6 +10782,23 @@
         "extsprintf": "^1.2.0"
       }
     },
+    "verte": {
+      "version": "0.0.12",
+      "resolved": "https://registry.npmjs.org/verte/-/verte-0.0.12.tgz",
+      "integrity": "sha512-QEWpKkjAT8SLkNJzeiZxN7tJuUiTTFO51tg9dGIrkDlQhzbaM+bTT0wtDM2c/F+Ur9luE64qhsM4xI0Af3Ut1g==",
+      "requires": {
+        "color-fns": "^0.0.10"
+      }
+    },
+    "vfa-picker": {
+      "version": "5.9.1",
+      "resolved": "https://registry.npmjs.org/vfa-picker/-/vfa-picker-5.9.1.tgz",
+      "integrity": "sha512-HytUGQWlEEWTbPm+s7AVXql6WI0+YNu9JsIFYsxdwjw/n5+IWRjKybGpEieknbAUkZoFZWKtke7zykIO2yjixA==",
+      "requires": {
+        "core-js": "^2.6.5",
+        "vue": "^2.6.10"
+      }
+    },
     "vm-browserify": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vm-browserify/-/vm-browserify-1.1.2.tgz",
@@ -10732,6 +10827,11 @@
         "@types/chart.js": "^2.7.55"
       }
     },
+    "vue-click-outside": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/vue-click-outside/-/vue-click-outside-1.1.0.tgz",
+      "integrity": "sha512-pNyvAA9mRXJwPHlHJyjMb4IONSc7khS5lxGcMyE2EIKgNMAO279PWM9Hyq0d5J4FkiSRdmFLwnbjDd5UtPizHQ=="
+    },
     "vue-clipboards": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/vue-clipboards/-/vue-clipboards-1.3.0.tgz",
@@ -10781,6 +10881,20 @@
       "resolved": "https://registry.npmjs.org/vue-i18n/-/vue-i18n-8.22.2.tgz",
       "integrity": "sha512-rb569fVJInPUgS/bbCxEQ9DrAoFTntuJvYoK4Fpk2VfNbA09WzdTKk57ppjz3S+ps9hW+p9H+2ASgMvojedkow=="
     },
+    "vue-icon-picker": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vue-icon-picker/-/vue-icon-picker-1.0.0.tgz",
+      "integrity": "sha512-pr1/SGnYXn+KwpM1gI4y/yOf8OGpsOaWYGZ2lLX8IxapkPDB7bNvRSeG7B9gCz3dG4iGwTB/kJo2ajrDaSaG5A==",
+      "requires": {
+        "@fortawesome/fontawesome-svg-core": "^1.2.4",
+        "@fortawesome/free-brands-svg-icons": "^5.3.1",
+        "@fortawesome/free-solid-svg-icons": "^5.3.1",
+        "@fortawesome/vue-fontawesome": "^0.1.1",
+        "vue": "^2.5.17",
+        "vue-click-outside": "^1.0.7",
+        "vue-color": "^2.6.0"
+      }
+    },
     "vue-js-toggle-button": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/vue-js-toggle-button/-/vue-js-toggle-button-1.3.3.tgz",
diff --git a/package.json b/package.json
index fc913723a..e212a1f75 100644
--- a/package.json
+++ b/package.json
@@ -20,10 +20,12 @@
     "vue-template-compiler": "^2.6.10"
   },
   "dependencies": {
+    "@rightbraintechbd/vue-awesome-icon-picker": "^1.1.0",
     "axios": "^0.15.3",
     "bootstrap": "^4.5.3",
     "bootstrap-colorpicker": "^3.0.3",
     "bootstrap-vue": "^2.19.0",
+    "bootstrap-vue-font-awesome-picker": "^0.1.3",
     "chart.js": "^2.7.2",
     "dateformat": "^3.0.3",
     "faker": "^5.1.0",
@@ -39,6 +41,9 @@
     "promise-polyfill": "8.1.3",
     "sortablejs": "^1.13.0",
     "uiv": "^0.28.0",
+    "v-color": "^1.1.2",
+    "verte": "0.0.12",
+    "vfa-picker": "^5.9.1",
     "vue": "^2.6.12",
     "vue-awesome-swiper": "^3.1.3",
     "vue-chartjs": "^3.3.2",
@@ -47,6 +52,7 @@
     "vue-faker": "^3.0.0",
     "vue-fullscreen": "^2.1.3",
     "vue-i18n": "^8.22.2",
+    "vue-icon-picker": "^1.0.0",
     "vue-js-toggle-button": "^1.3.1",
     "vue-multiselect": "^2.1.6",
     "vue-muuri": "^0.1.2",
diff --git a/resources/assets/js/admin/settings/customCaseList/CaseListSketch.vue b/resources/assets/js/admin/settings/customCaseList/CaseListSketch.vue
new file mode 100644
index 000000000..26999e531
--- /dev/null
+++ b/resources/assets/js/admin/settings/customCaseList/CaseListSketch.vue
@@ -0,0 +1,230 @@
+<template>
+    <div
+        id="home"
+    >
+        <div class="demo">
+            <div class="container">
+                <h5 >{{ $t("ID_NEW_CASES_LISTS") }}</h5>
+
+                 <div class="row">
+                    <div class="col-sm">
+
+                    <b-row>
+                        <b-col>
+                            <b-form-group
+                                id="nameLabel"
+                                label="Name "
+                                label-for="name"
+                            >
+                                <b-form-input
+                                id="name"
+                                v-model="params.name"
+                                placeholder="Set a Case List Name"
+                                required
+                                ></b-form-input>
+                            </b-form-group>
+                          
+                        </b-col>
+                        <b-col>
+                           <b-form-group
+                                id="tableLabel"
+                                label="PM Table "
+                                label-for="name"    
+                            >
+                                <multiselect
+                                    v-model="params.tableUid"
+                                    :options="pmTablesOptions"
+                                    placeholder="Chose an option"
+                                    label="label"
+                                    track-by="value"
+                                    :show-no-results="false"
+                                    @search-change="asyncFind"
+                                    :loading="isLoading"
+                                    id="ajax"
+                                    :limit="10"
+                                    :clear-on-select="true"
+                                >
+                        </multiselect>
+                            </b-form-group>  
+                        
+                        </b-col>
+
+                    </b-row>
+                       
+                        <b-form-group
+                            id="descriptionLabel"
+                            label="Description "
+                            label-for="description"
+                        >
+                            <b-form-textarea
+                                id="description"
+                                v-model="params.description"
+                                placeholder="Some Text"
+                                rows="1"
+                                max-rows="1"
+                            ></b-form-textarea>
+                        </b-form-group>
+
+
+                        <v-client-table :columns="columns" v-model="data" :options="options">
+                            <a slot="uri" slot-scope="props" target="_blank" :href="props.row.uri" class="glyphicon glyphicon-eye-open"></a>
+
+                            <div slot="child_row" slot-scope="props">
+                            The link to {{props.row.name}} is <a :href="props.row.uri">{{props.row.uri}}</a>
+                            </div>
+
+                            <div slot="name" slot-scope="{row, update, setEditing, isEditing, revertValue}">
+                            <span @click="setEditing(true)" v-if="!isEditing()">
+                                <a>{{row.name}}</a>
+                            </span>
+                            <span v-else>
+                                <input type="text" v-model="row.name">
+                                <button type="button" class="btn btn-info btn-xs" @click="update(row.name); setEditing(false)">Submit</button>
+                            <button type="button" class="btn btn-default btn-xs" @click="revertValue(); setEditing(false)">Cancel</button>
+                            
+                            </span>
+
+                            </div>
+                        </v-client-table>
+                        <b-form-group
+                            id="iconLabel"
+                            label="Icon "
+                            label-for="icon"
+                        >
+                            <icon-picker @selected="onSelectIcon" :color="menuColor"/>
+                        </b-form-group>
+                        <div>
+                             <b-form-group
+                                id="menuColor"
+                                label="Menu Color "
+                                label-for="icon"    
+                            >  
+                                <verte :value="menuColor" id="icon" @input="onChangeColor" picker="square" menuPosition="left" model="hex">
+                                        <svg viewBox="0 0 50 50">
+                                            <path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
+                                        </svg> 
+                                </verte>
+                            </b-form-group>
+                        </div>
+                   
+                        <div>
+                            <b-form-group
+                                id="screenColor"
+                                label="Screen Color Icon"
+                                label-for="screen"
+                            >  
+                                <verte id="screen" picker="square" menuPosition="left" model="rgb">
+                                        <svg viewBox="0 0 50 50">
+                                            <path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
+                                        </svg> 
+                                </verte>
+                            </b-form-group>
+                        </div>
+                        
+                    </div>
+                    <div class="col-sm">
+                    One of two columns
+                  
+                    </div>
+                    
+                </div>
+                <div>
+                    <b-button variant="danger" @click="onCancel">Cancel</b-button>
+                    <b-button variant="outline-primary">Preview</b-button>
+                    <b-button variant="success">Save</b-button>
+                </div>
+              
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import utils from "../../../utils/utils"
+import Multiselect from "vue-multiselect";
+import api from "./../../../api/index";
+import IconPicker from '../../../components/iconPicker/IconPicker.vue';
+
+export default {
+    name: "CaseListSketh",
+    components: {
+        Multiselect,
+        IconPicker,
+        IconPicker
+    },
+    props:["params"],
+    data() {
+        return {
+             icon: "fas fa-user-cog",
+            isLoading: false,
+            menuColor:"#4287f5",
+            pmTablesOptions: [],
+            columns: ['name', 'code', 'uri'],
+            data: utils.getData(),
+            options: {
+                headings: {
+                    name: 'Country Name',
+                    code: 'Country Code',
+                    uri: 'View Record'
+                },
+                filterable:true,
+                editableColumns:['name'],
+                sortable: ['name', 'code'],
+                filterable: ['name', 'code']
+            }
+        };
+    },
+    mounted() {
+       
+    },
+    methods: {
+        onSelectIcon(data){
+            console.log (data);
+
+        },
+        onChangeColor(color){
+            console.log(color);
+            this.menuColor = color;
+        },
+        onCancel(){
+            this.$emit("closeSketch");
+        },
+        onChange (e) {
+            console.log(e)
+            },
+         /**
+         * Find asynchronously in the server
+         * @param {string} query - string from the text field
+         */
+        asyncFind(query) {
+            let self = this;
+            this.isLoading = true;
+            self.processes = [];
+            api.filters
+                .processList(query)
+                .then((response) => {
+                    self.processes = [];
+                    _.forEach(response.data, function(elem, key) {
+                        self.pmTablesOptions.push({
+                            label: elem.PRO_TITLE,
+                            value: elem.PRO_ID,
+                        });
+                    });
+                    this.isLoading = false;
+                })
+                .catch((e) => {
+                    console.error(err);
+                });
+        },
+    }
+};
+</script>
+
+<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>
+<style scoped>
+.verte {
+    position: relative;
+    display: flex;
+    justify-content: normal;
+}
+</style>
+
diff --git a/resources/assets/js/admin/settings/customCaseList/CustomCaseList.vue b/resources/assets/js/admin/settings/customCaseList/CustomCaseList.vue
index 5f85979d0..4dd77805c 100644
--- a/resources/assets/js/admin/settings/customCaseList/CustomCaseList.vue
+++ b/resources/assets/js/admin/settings/customCaseList/CustomCaseList.vue
@@ -3,13 +3,16 @@
         id="home"
     >
         <div class="demo">
-            <div class="container">
+            <div class="container" v-if="!showSketch">
                 <h5 >{{ $t("ID_CUSTOM_CASES_LISTS") }}</h5>
                 <div class="x_content">
                     <b-container fluid>
                         <b-tabs content-class="mt-3">
                             <b-tab :title="$t('TO_DO')" active>
-                                <Tables module="inbox"/>
+                                <Tables module="inbox" 
+                                    @showSketch="onShowSketch"
+                                    @closeSketch="onCloseSketch"
+                                />
                             </b-tab>
                             <b-tab :title="$t('ID_DRAFT')" lazy>
                                 <Tables module="draft"/>
@@ -25,25 +28,43 @@
                   
                 </div> 
             </div>
+            <div class="container" v-if="showSketch">
+                <CaseListSketch 
+                    @showSketch="onShowSketch"
+                    @closeSketch="onCloseSketch"
+                    :params="params"
+                />
+            </div>
         </div>
     </div>
 </template>
 <script>
 import Tables from "./Tables";
+import CaseListSketch from "./CaseListSketch"
 export default {
     name: "CustomCaseList",
     components: {
-        Tables
+        Tables,
+        CaseListSketch
     },
     data() {
         return {
-            
+            showSketch: false,
+            params: {}
         };
     },
     mounted() {
        
     },
     methods: {
+        onShowSketch (params) {
+            this.showSketch = true;
+            debugger;
+            this.params = params;
+        },
+        onCloseSketch (params) {
+            this.showSketch = false;
+        }
         
     }
 };
diff --git a/resources/assets/js/admin/settings/customCaseList/Tables.vue b/resources/assets/js/admin/settings/customCaseList/Tables.vue
index 351d1831b..3da9f4b1c 100644
--- a/resources/assets/js/admin/settings/customCaseList/Tables.vue
+++ b/resources/assets/js/admin/settings/customCaseList/Tables.vue
@@ -55,6 +55,17 @@ export default {
                 title: this.$i18n.t("New List"),
                 class: "btn-success",
                 onClick: () => {
+                    this.$emit("showSketch", {
+                        name: "Rocko",
+                        description: "algo te texto",
+                        tableUid: "1234",
+                        iconList: '',
+                        iconColor: '',
+                        iconColorScreen:'',
+                        type: this.module
+
+                    });
+
                     //TODO button
                 }
             },
@@ -76,8 +87,6 @@ export default {
             ],
             tableData: [],
             options: {
-                perPage:25,
-                perPageValues:[25],
                 filterable: true,
                 headings: {
                     name: this.$i18n.t("ID_NAME"),
diff --git a/resources/assets/js/admin/settings/customCaseList/main.js b/resources/assets/js/admin/settings/customCaseList/main.js
index 3187c2b6b..74038fec3 100644
--- a/resources/assets/js/admin/settings/customCaseList/main.js
+++ b/resources/assets/js/admin/settings/customCaseList/main.js
@@ -10,14 +10,17 @@ import "@fortawesome/fontawesome-free/js/all.js";
 import 'bootstrap/dist/css/bootstrap-grid.css';
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'bootstrap-vue/dist/bootstrap-vue.css'
-
 import CustomCaseList from "./CustomCaseList";
+
+import Verte from 'verte';
+import 'verte/dist/verte.css';
+// register component globally
+Vue.component('verte', Verte);
 Vue.use(VueRouter);
 Vue.use(VueSidebarMenu);
 Vue.use(BootstrapVue);
-Vue.use(BootstrapVueIcons);
 Vue.use(VueI18n);
-
+Vue.use(BootstrapVueIcons)
 Vue.use(ServerTable, {}, false, 'bootstrap3', {});
 Vue.use(ClientTable, {}, false, 'bootstrap3', {});
 window.ProcessMaker = {
@@ -48,5 +51,6 @@ new Vue({
     // eslint-disable-line no-new
     el: "#customCaseList",
     router,
+    components: { Verte },
     render: (h) => h(CustomCaseList),
 });
\ No newline at end of file
diff --git a/resources/assets/js/components/iconPicker/IconPicker.vue b/resources/assets/js/components/iconPicker/IconPicker.vue
new file mode 100644
index 000000000..e77ae6fbd
--- /dev/null
+++ b/resources/assets/js/components/iconPicker/IconPicker.vue
@@ -0,0 +1,210 @@
+<template>  
+  <div class="rbt-icon-picker">
+
+    <b-button @click="popUpActive = true">  
+      <i ref="icon" v-bind:class="`${selectedIcon.type} fa-${selectedIcon.name}`" v-bind:color="color"></i>
+    </b-button>
+  
+        <div class="rip-popup-component" :style="popupActiveStyle">
+          <div class="rip-popup-bg"></div>  
+          <div class="rip-popup">
+
+
+            <div class="rip-popup-content">
+              <div class="rip-search">
+                <div class="rip-input">
+                  <label for="ripSearch" style="display: none;">Search for Icon</label>
+                  <input id="ripSearch" placeholder="Search for Icon" v-model="searchText" @input="searchTextChanged">
+                  <span class="input-append">
+                      <i class="fas fa-search"></i>
+                  </span>
+                </div>
+              </div>
+
+              <div class="rip-content">
+                <div class="rip-not-found" v-show="loading">
+                  <i class="fas fa-spinner fa-pulse"></i>
+                </div>
+
+                <div class="rip-icons" v-show="!loading">
+
+                  <h4 class="icon-title">
+                    Regular Icons
+                  </h4>
+                  <p style="text-align: center;" v-if="regularIcons.length <= 0">
+                    <i class="fas fa-eye-slash"></i>
+                    Sorry, No icons found!
+                  </p>
+                  <ul class="rip-row" v-if="regularIcons.length > 0">
+                    <li v-for="(icon, index) in regularIcons" :key="index" class="rip-col">
+                      <div class="icon-content text-center">
+                        <div class="icon-el" @click="selectIcon(icon, 'far')">
+                          <i :class="`far fa-${icon}`"></i>
+                        </div>
+                        <div class="icon-title">
+                          {{ icon }}
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+
+                  <h4 class="icon-title">
+                    Brand Icons
+                  </h4>
+                  <p style="text-align: center;" v-if="brandIcons.length <= 0">
+                    <i class="fas fa-eye-slash"></i>
+                    Sorry, No Brand icons found!
+                  </p>
+
+                  <ul class="rip-row" v-if="brandIcons.length > 0">
+                    <li v-for="(icon, index) in brandIcons" :key="index" class="rip-col">
+                      <div class="icon-content text-center">
+                        <div class="icon-el" @click="selectIcon(icon, 'fab')">
+                          <i :class="`fab fa-${icon}`"></i>
+                        </div>
+                        <div class="icon-title">
+                          {{ icon }}
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+
+                  <h4 class="icon-title">
+                    Solid Icons
+                  </h4>
+                  <p style="text-align: center;" v-if="solidIcons.length <= 0">
+                    <i class="fas fa-eye-slash"></i>
+                    Sorry, No Solid icons found!
+                  </p>
+
+                  <ul class="rip-row" v-if="solidIcons.length > 0">
+                    <li v-for="(icon, index) in solidIcons" :key="index" class="rip-col">
+                      <div class="icon-content text-center">
+                        <div class="icon-el" @click="selectIcon(icon, 'fas')">
+                          <i :class="`fas fa-${icon}`"></i>
+                        </div>
+                        <div class="icon-title">
+                          {{ icon }}
+                        </div>
+                      </div>
+                    </li>
+                  </ul>
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+  </div>
+</template>
+
+<script>
+  import ripIcons from './assets/icons';
+  export default {
+    name: 'VueAwesomeIconPicker',
+    props: {
+      button: {
+        type: String,
+        default: 'Pick A Icon'
+      },
+      color: {
+        type: String,
+        default: 'black'
+      },
+      title: {
+        type: String,
+        default: 'Vue Awesome Icon Picker'
+      },
+      iconPreview: {
+        type: Boolean,
+        default: true
+      }
+    },
+    data() {
+      return {
+        loading: false,
+        allIcons: {
+            brand: [],
+            regular: [],
+            solid: []
+        },
+
+        popUpActive: false,
+        selectedIcon: {
+          name: "list",
+          type: "fas"
+        },
+        searchText: '', 
+
+        searchIconNotFound: false
+      }
+    },
+    watch: {
+      color(){
+        console.log("colores");
+      }
+    },
+    methods: {
+      selectIcon(icon, type) {
+        this.selectedIcon.type = type;
+        this.selectedIcon.name = icon;
+        this.popUpActive = false;
+        this.$emit('selected', this.selectedIcon);
+      },
+      searchTextChanged() {
+        this.searchIcon(this.searchText);
+      },
+      setDefaultIcons() {
+        this.allIcons.brand = ripIcons.brand;
+        this.allIcons.regular = ripIcons.regular;
+        this.allIcons.solid = ripIcons.solid;
+      },
+      searchIcon(txt) {
+        this.loading = true;
+        if(txt && txt.length > 0) {
+          setTimeout(() => {
+            this.loading = false;
+          }, 950);
+
+          txt = txt.toLowerCase();
+          Object.keys(ripIcons).forEach(key => {
+            setTimeout(() => {
+              let icons = ripIcons[key].filter(ico => ico.indexOf(txt) > -1);
+              if(icons && icons.length > 0) {
+                this.allIcons[key] = icons;
+              } else {
+                this.allIcons[key] = [];
+              }
+            }, 320);
+          });
+        } else {
+          setTimeout(() => {
+            this.setDefaultIcons();
+            this.loading = false;
+          }, 950);
+        }
+      }
+    },
+    created() {
+      this.setDefaultIcons();
+    },
+    computed: {
+      popupActiveStyle() {
+        return !this.popUpActive ? 'display: none;' : '';
+      },
+      brandIcons() {
+        return this.loading ? [] : this.allIcons.brand;
+      },
+      solidIcons() {
+        return this.loading ? [] : this.allIcons.solid;
+      },
+      regularIcons() {
+        return this.loading ? [] : this.allIcons.regular;
+      }
+    }
+  };
+</script>
+
+<style lang="scss" scoped>
+  @import "./assets/RbtIconPicker";
+</style>
diff --git a/resources/assets/js/components/iconPicker/assets/_RbtIconPicker.scss b/resources/assets/js/components/iconPicker/assets/_RbtIconPicker.scss
new file mode 100644
index 000000000..55bf87426
--- /dev/null
+++ b/resources/assets/js/components/iconPicker/assets/_RbtIconPicker.scss
@@ -0,0 +1,239 @@
+.rbt-icon-picker {
+    .icon-preview {
+        font-size: 22px;
+        padding: 10px 20px 0;
+        display: inline-block;
+    }
+    .picker-btn {
+        color: #fff;
+        background: #339af0;
+        padding: 12px 25px;
+        border: 0;
+        border-radius: 2px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+        cursor: pointer;
+        transition: all .25s ease-in;
+        &:hover {
+            background: #2c89d6;
+        }
+    }
+}
+
+.rip-popup-component {
+    text-align: center;
+    z-index: 5999999;
+    transition: all .2s;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: -webkit-box;
+    display: -ms-flexbox;
+    display: flex;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    opacity: 1;
+    .rip-popup-bg {
+        width: 100%;
+        background: rgba(0,0,0,.4);
+        position: absolute;
+        top: 0;
+        height: 100%;
+        z-index: 10;
+        transition: all .25s ease;
+        opacity: 1;
+        left: 0;
+    }
+    .rip-popup {
+        transition: all .2s;
+        z-index: 100;
+        margin: 10px;
+        width: calc(100% - 30px);
+        height: calc(100% - 30px);
+        border-radius: 6px;
+        box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
+        background: #f8f9fa;
+        animation: rebound .3s;
+        .rip-popup-header {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            background: rgba(0,0,0,.05);
+            border-radius: 5px 5px;
+            position: relative;
+            h2 {
+                transition: all .23s ease .1s;
+                padding: 8px 8px 8px 12px;
+                font-size: 18px;
+                text-align: center;
+                width: 100%;
+            }
+            span {
+                background: #ffffff;
+                transition: all .23s ease .1s;
+                position: relative;
+                padding: 8px;
+                cursor: pointer;
+                box-shadow: 0 5px 20px 0 rgba(0,0,0,.1);
+                border-radius: 5px;
+                color: rgba(0,0,0,.6);
+                transform: translate(8px,-8px);
+                line-height: 16px;
+                font-size: 30px;
+                &:hover {
+                    box-shadow: 0 0 0 0 rgba(0,0,0,.1);
+                    transform: translate(5px,-5px);
+                }
+            }
+        }
+        .rip-popup-content {
+            padding: 14px;
+            font-size: 14px;
+            transition: all .23s ease .1s;
+            overflow: auto;
+            max-height: calc(100vh - 100px);
+            margin-top: 5px;
+            margin-bottom: 5px;
+            .rip-search {
+                .rip-input {
+                    display: flex;
+                    -webkit-box-align: start;
+                    -ms-flex-align: start;
+                    align-items: flex-start;
+                    -webkit-box-orient: vertical;
+                    -webkit-box-direction: normal;
+                    -ms-flex-direction: column;
+                    flex-direction: column;
+                    position: relative;
+                    -webkit-box-pack: center;
+                    -ms-flex-pack: center;
+                    justify-content: center;
+                    padding-bottom: 20px;
+                    border-bottom: 1px dashed #e5e5e5;
+                    margin-bottom: 20px;
+                    input {
+                        width: 100% !important;
+                        transition: all .1s ease-in-out;
+                        padding: 16px 48px 16px 24px;
+                        font-size: 25px;
+                        border: 2px solid #dee2e6;
+                        box-shadow: inset 0 0.25rem 0.125rem 0 rgba(0,0,0,0.05);
+                        color: #495057;
+                        border-radius: 4px;
+                        &::placeholder {
+                            color: #c9cbcd;
+                        }
+                    }
+                    span {
+                        position: absolute;
+                        right: 25px;
+                        font-size: 28px;
+                        color: #caccce;
+                        opacity: 0.4;
+                    }
+                }
+            }
+            .rip-content {
+                width: 100%;
+                .rip-not-found {
+                    min-height: 75vh;
+                    display: flex;
+                    align-items: center;
+                    align-self: center;
+                    align-content: center;
+                    min-width: 100%;
+                    text-align: center;
+                    svg {
+                        margin: 0 auto;
+                        font-size: 50px;
+                        color: #adb5bd;
+                    }
+                }
+                h4.icon-title {
+                    font-size: 20px;
+                    text-transform: uppercase;
+                    letter-spacing: 0.03em;
+                    margin-bottom: 25px;
+                }
+                .rip-row {
+                    width: 100%;
+                    display: flex;
+                    flex-wrap: wrap;
+                    margin: 0;
+                    padding: 0;
+                    .rip-col {
+                        text-align: center;
+                        padding: 0 0 16px;
+                        width: 25%;
+                        list-style: none;
+                        .icon-content {
+                            border-radius: 3px;
+                            transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
+                            transform: translateZ(0);
+                            .icon-el {
+                                padding: 8px;
+                                font-size: 35px;
+                                font-weight: 900;
+                                color: #495057;
+                                cursor: pointer;
+                                transition: all ;
+                                border-top-left-radius: 3px;
+                                border-top-right-radius: 3px;
+                                &:hover {
+                                    color: #fff;
+                                    background: #339af0;
+                                }
+                            }
+                            .icon-title {
+                                padding: 8px 4px;
+                                font-size: 13px;
+                                color: #adb5bd;
+                                &:hover {
+                                    color: #495057;
+                                }
+                            }
+                            &:hover {
+                                background: #fff;
+                                box-shadow: 0 0.25rem 0.125rem 0 rgba(0,0,0,0.05);
+                            }
+                        }
+
+                        @media (min-width: 576px) {
+                            width: 20%;
+                        }
+                        @media (min-width: 768px) {
+                            width: 16.6667%;
+                        }
+                        @media (min-width: 1200px) {
+                            width: 11.1111%;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@keyframes rebound {
+    0% {
+        -webkit-transform: scale(.9);
+        transform: scale(.9);
+    }
+
+    50% {
+        -webkit-transform: scale(1.08);
+        transform: scale(1.08);
+    }
+    100% {
+        -webkit-transform: scale(1);
+        transform: scale(1);
+    }
+}
diff --git a/resources/assets/js/components/iconPicker/assets/icons/brand.js b/resources/assets/js/components/iconPicker/assets/icons/brand.js
new file mode 100644
index 000000000..b1c954385
--- /dev/null
+++ b/resources/assets/js/components/iconPicker/assets/icons/brand.js
@@ -0,0 +1,437 @@
+const brand = [
+    '500px',
+    'accessible-icon',
+    'accusoft',
+    'acquisitions-incorporated',
+    'adn',
+    'adobe',
+    'adversal',
+    'affiliatetheme',
+    'airbnb',
+    'algolia',
+    'alipay',
+    'amazon',
+    'amazon-pay',
+    'amilia',
+    'android',
+    'angellist',
+    'angrycreative',
+    'angular',
+    'app-store',
+    'app-store-ios',
+    'apper',
+    'apple',
+    'apple-pay',
+    'artstation',
+    'asymmetrik',
+    'atlassian',
+    'audible',
+    'autoprefixer',
+    'avianex',
+    'aviato',
+    'aws',
+    'bandcamp',
+    'battle-net',
+    'behance',
+    'behance-square',
+    'bimobject',
+    'bitbucket',
+    'bitcoin',
+    'bity',
+    'black-tie',
+    'blackberry',
+    'blogger',
+    'blogger-b',
+    'bluetooth',
+    'bluetooth-b',
+    'bootstrap',
+    'btc',
+    'buffer',
+    'buromobelexperte',
+    'buy-n-large',
+    'buysellads',
+    'canadian-maple-leaf',
+    'cc-amazon-pay',
+    'cc-amex',
+    'cc-apple-pay',
+    'cc-diners-club',
+    'cc-discover',
+    'cc-jcb',
+    'cc-mastercard',
+    'cc-paypal',
+    'cc-stripe',
+    'cc-visa',
+    'centercode',
+    'centos',
+    'chrome',
+    'chromecast',
+    'cloudscale',
+    'cloudsmith',
+    'cloudversify',
+    'codepen',
+    'codiepie',
+    'confluence',
+    'connectdevelop',
+    'contao',
+    'cotton-bureau',
+    'cpanel',
+    'creative-commons',
+    'creative-commons-by',
+    'creative-commons-nc',
+    'creative-commons-nc-eu',
+    'creative-commons-nc-jp',
+    'creative-commons-nd',
+    'creative-commons-pd',
+    'creative-commons-pd-alt',
+    'creative-commons-remix',
+    'creative-commons-sa',
+    'creative-commons-sampling',
+    'creative-commons-sampling-plus',
+    'creative-commons-share',
+    'creative-commons-zero',
+    'critical-role',
+    'css3',
+    'css3-alt',
+    'cuttlefish',
+    'd-and-d',
+    'd-and-d-beyond',
+    'dashcube',
+    'delicious',
+    'deploydog',
+    'deskpro',
+    'dev',
+    'deviantart',
+    'dhl',
+    'diaspora',
+    'digg',
+    'digital-ocean',
+    'discord',
+    'discourse',
+    'dochub',
+    'docker',
+    'draft2digital',
+    'dribbble',
+    'dribbble-square',
+    'dropbox',
+    'drupal',
+    'dyalog',
+    'earlybirds',
+    'ebay',
+    'edge',
+    'elementor',
+    'ello',
+    'ember',
+    'empire',
+    'envira',
+    'erlang',
+    'ethereum',
+    'etsy',
+    'evernote',
+    'expeditedssl',
+    'facebook',
+    'facebook-f',
+    'facebook-messenger',
+    'facebook-square',
+    'fantasy-flight-games',
+    'fedex',
+    'fedora',
+    'figma',
+    'firefox',
+    'first-order',
+    'first-order-alt',
+    'firstdraft',
+    'flickr',
+    'flipboard',
+    'fly',
+    'font-awesome',
+    'font-awesome-alt',
+    'font-awesome-flag',
+    'fonticons',
+    'fonticons-fi',
+    'fort-awesome',
+    'fort-awesome-alt',
+    'forumbee',
+    'foursquare',
+    'free-code-camp',
+    'freebsd',
+    'fulcrum',
+    'galactic-republic',
+    'galactic-senate',
+    'get-pocket',
+    'gg',
+    'gg-circle',
+    'git',
+    'git-alt',
+    'git-square',
+    'github',
+    'github-alt',
+    'github-square',
+    'gitkraken',
+    'gitlab',
+    'gitter',
+    'glide',
+    'glide-g',
+    'gofore',
+    'goodreads',
+    'goodreads-g',
+    'google',
+    'google-drive',
+    'google-play',
+    'google-plus',
+    'google-plus-g',
+    'google-plus-square',
+    'google-wallet',
+    'gratipay',
+    'grav',
+    'gripfire',
+    'grunt',
+    'gulp',
+    'hacker-news',
+    'hacker-news-square',
+    'hackerrank',
+    'hips',
+    'hire-a-helper',
+    'hooli',
+    'hornbill',
+    'hotjar',
+    'houzz',
+    'html5',
+    'hubspot',
+    'imdb',
+    'instagram',
+    'intercom',
+    'internet-explorer',
+    'invision',
+    'ioxhost',
+    'itch-io',
+    'itunes',
+    'itunes-note',
+    'java',
+    'jedi-order',
+    'jenkins',
+    'jira',
+    'joget',
+    'joomla',
+    'js',
+    'js-square',
+    'jsfiddle',
+    'kaggle',
+    'keybase',
+    'keycdn',
+    'kickstarter',
+    'kickstarter-k',
+    'korvue',
+    'laravel',
+    'lastfm',
+    'lastfm-square',
+    'leanpub',
+    'less',
+    'line',
+    'linkedin',
+    'linkedin-in',
+    'linode',
+    'linux',
+    'lyft',
+    'magento',
+    'mailchimp',
+    'mandalorian',
+    'markdown',
+    'mastodon',
+    'maxcdn',
+    'mdb',
+    'medapps',
+    'medium',
+    'medium-m',
+    'medrt',
+    'meetup',
+    'megaport',
+    'mendeley',
+    'microsoft',
+    'mix',
+    'mixcloud',
+    'mizuni',
+    'modx',
+    'monero',
+    'napster',
+    'neos',
+    'nimblr',
+    'node',
+    'node-js',
+    'npm',
+    'ns8',
+    'nutritionix',
+    'odnoklassniki',
+    'odnoklassniki-square',
+    'old-republic',
+    'opencart',
+    'openid',
+    'opera',
+    'optin-monster',
+    'orcid',
+    'osi',
+    'page4',
+    'pagelines',
+    'palfed',
+    'patreon',
+    'paypal',
+    'penny-arcade',
+    'periscope',
+    'phabricator',
+    'phoenix-framework',
+    'phoenix-squadron',
+    'php',
+    'pied-piper',
+    'pied-piper-alt',
+    'pied-piper-hat',
+    'pied-piper-pp',
+    'pinterest',
+    'pinterest-p',
+    'pinterest-square',
+    'playstation',
+    'product-hunt',
+    'pushed',
+    'python',
+    'qq',
+    'quinscape',
+    'quora',
+    'r-project',
+    'raspberry-pi',
+    'ravelry',
+    'react',
+    'reacteurope',
+    'readme',
+    'rebel',
+    'red-river',
+    'reddit',
+    'reddit-alien',
+    'reddit-square',
+    'redhat',
+    'renren',
+    'replyd',
+    'researchgate',
+    'resolving',
+    'rev',
+    'rocketchat',
+    'rockrms',
+    'safari',
+    'salesforce',
+    'sass',
+    'schlix',
+    'scribd',
+    'searchengin',
+    'sellcast',
+    'sellsy',
+    'servicestack',
+    'shirtsinbulk',
+    'shopware',
+    'simplybuilt',
+    'sistrix',
+    'sith',
+    'sketch',
+    'skyatlas',
+    'skype',
+    'slack',
+    'slack-hash',
+    'slideshare',
+    'snapchat',
+    'snapchat-ghost',
+    'snapchat-square',
+    'soundcloud',
+    'sourcetree',
+    'speakap',
+    'speaker-deck',
+    'spotify',
+    'squarespace',
+    'stack-exchange',
+    'stack-overflow',
+    'stackpath',
+    'staylinked',
+    'steam',
+    'steam-square',
+    'steam-symbol',
+    'sticker-mule',
+    'strava',
+    'stripe',
+    'stripe-s',
+    'studiovinari',
+    'stumbleupon',
+    'stumbleupon-circle',
+    'superpowers',
+    'supple',
+    'suse',
+    'swift',
+    'symfony',
+    'teamspeak',
+    'telegram',
+    'telegram-plane',
+    'tencent-weibo',
+    'the-red-yeti',
+    'themeco',
+    'themeisle',
+    'think-peaks',
+    'trade-federation',
+    'trello',
+    'tripadvisor',
+    'tumblr',
+    'tumblr-square',
+    'twitch',
+    'twitter',
+    'twitter-square',
+    'typo3',
+    'uber',
+    'ubuntu',
+    'uikit',
+    'umbraco',
+    'uniregistry',
+    'untappd',
+    'ups',
+    'usb',
+    'usps',
+    'ussunnah',
+    'vaadin',
+    'viacoin',
+    'viadeo',
+    'viadeo-square',
+    'viber',
+    'vimeo',
+    'vimeo-square',
+    'vimeo-v',
+    'vine',
+    'vk',
+    'vnv',
+    'vuejs',
+    'waze',
+    'weebly',
+    'weibo',
+    'weixin',
+    'whatsapp',
+    'whatsapp-square',
+    'whmcs',
+    'wikipedia-w',
+    'windows',
+    'wix',
+    'wizards-of-the-coast',
+    'wolf-pack-battalion',
+    'wordpress',
+    'wordpress-simple',
+    'wpbeginner',
+    'wpexplorer',
+    'wpforms',
+    'wpressr',
+    'xbox',
+    'xing',
+    'xing-square',
+    'y-combinator',
+    'yahoo',
+    'yammer',
+    'yandex',
+    'yandex-international',
+    'yarn',
+    'yelp',
+    'yoast',
+    'youtube',
+    'youtube-square',
+    'zhihu'
+];
+
+export default brand;
\ No newline at end of file
diff --git a/resources/assets/js/components/iconPicker/assets/icons/index.js b/resources/assets/js/components/iconPicker/assets/icons/index.js
new file mode 100644
index 000000000..0b9fcd8c2
--- /dev/null
+++ b/resources/assets/js/components/iconPicker/assets/icons/index.js
@@ -0,0 +1,7 @@
+import solid from "./solid";
+import regular from "./regular";
+import brand from "./brand";
+
+const icons = { solid, brand, regular };
+
+export default icons;
\ No newline at end of file
diff --git a/resources/assets/js/components/iconPicker/assets/icons/regular.js b/resources/assets/js/components/iconPicker/assets/icons/regular.js
new file mode 100644
index 000000000..70710603b
--- /dev/null
+++ b/resources/assets/js/components/iconPicker/assets/icons/regular.js
@@ -0,0 +1,155 @@
+const regular = [
+    'address-book',
+    'address-card',
+    'angry',
+    'arrow-alt-circle-down',
+    'arrow-alt-circle-left',
+    'arrow-alt-circle-right',
+    'arrow-alt-circle-up',
+    'bell',
+    'bell-slash',
+    'bookmark',
+    'building',
+    'calendar',
+    'calendar-alt',
+    'calendar-check',
+    'calendar-minus',
+    'calendar-plus',
+    'calendar-times',
+    'caret-square-down',
+    'caret-square-left',
+    'caret-square-right',
+    'caret-square-up',
+    'chart-bar',
+    'check-circle',
+    'check-square',
+    'circle',
+    'clipboard',
+    'clock',
+    'clone',
+    'closed-captioning',
+    'comment',
+    'comment-alt',
+    'comment-dots',
+    'comments',
+    'compass',
+    'copy',
+    'copyright',
+    'credit-card',
+    'dizzy',
+    'dot-circle',
+    'edit',
+    'envelope',
+    'envelope-open',
+    'eye',
+    'eye-slash',
+    'file',
+    'file-alt',
+    'file-archive',
+    'file-audio',
+    'file-code',
+    'file-excel',
+    'file-image',
+    'file-pdf',
+    'file-powerpoint',
+    'file-video',
+    'file-word',
+    'flag',
+    'flushed',
+    'folder',
+    'folder-open',
+    'frown',
+    'frown-open',
+    'futbol',
+    'gem',
+    'grimace',
+    'grin',
+    'grin-alt',
+    'grin-beam',
+    'grin-beam-sweat',
+    'grin-hearts',
+    'grin-squint',
+    'grin-squint-tears',
+    'grin-stars',
+    'grin-tears',
+    'grin-tongue',
+    'grin-tongue-squint',
+    'grin-tongue-wink',
+    'grin-wink',
+    'hand-lizard',
+    'hand-paper',
+    'hand-peace',
+    'hand-point-down',
+    'hand-point-left',
+    'hand-point-right',
+    'hand-point-up',
+    'hand-pointer',
+    'hand-rock',
+    'hand-scissors',
+    'hand-spock',
+    'handshake',
+    'hdd',
+    'heart',
+    'hospital',
+    'hourglass',
+    'id-badge',
+    'id-card',
+    'image',
+    'images',
+    'keyboard',
+    'kiss',
+    'kiss-beam',
+    'kiss-wink-heart',
+    'laugh',
+    'laugh-beam',
+    'laugh-squint',
+    'laugh-wink',
+    'lemon',
+    'life-ring',
+    'lightbulb',
+    'list-alt',
+    'map',
+    'meh',
+    'meh-blank',
+    'meh-rolling-eyes',
+    'minus-square',
+    'money-bill-alt',
+    'moon',
+    'newspaper',
+    'object-group',
+    'object-ungroup',
+    'paper-plane',
+    'pause-circle',
+    'play-circle',
+    'plus-square',
+    'question-circle',
+    'registered',
+    'sad-cry',
+    'sad-tear',
+    'save',
+    'share-square',
+    'smile',
+    'smile-beam',
+    'smile-wink',
+    'snowflake',
+    'square',
+    'star',
+    'star-half',
+    'sticky-note',
+    'stop-circle',
+    'sun',
+    'surprise',
+    'thumbs-down',
+    'thumbs-up',
+    'times-circle',
+    'tired',
+    'trash-alt',
+    'user',
+    'user-circle',
+    'window-close',
+    'window-maximize',
+    'window-minimize',
+    'window-restore'
+];
+
+export default regular;
\ No newline at end of file
diff --git a/resources/assets/js/components/iconPicker/assets/icons/solid.js b/resources/assets/js/components/iconPicker/assets/icons/solid.js
new file mode 100644
index 000000000..5edbf8fd2
--- /dev/null
+++ b/resources/assets/js/components/iconPicker/assets/icons/solid.js
@@ -0,0 +1,962 @@
+const solid = [
+    'ad',
+    'address-book',
+    'address-card',
+    'adjust',
+    'air-freshener',
+    'align-center',
+    'align-justify',
+    'align-left',
+    'align-right',
+    'allergies',
+    'ambulance',
+    'american-sign-language-interpreting',
+    'anchor',
+    'angle-double-down',
+    'angle-double-left',
+    'angle-double-right',
+    'angle-double-up',
+    'angle-down',
+    'angle-left',
+    'angle-right',
+    'angle-up',
+    'angry',
+    'ankh',
+    'apple-alt',
+    'archive',
+    'archway',
+    'arrow-alt-circle-down',
+    'arrow-alt-circle-left',
+    'arrow-alt-circle-right',
+    'arrow-alt-circle-up',
+    'arrow-circle-down',
+    'arrow-circle-left',
+    'arrow-circle-right',
+    'arrow-circle-up',
+    'arrow-down',
+    'arrow-left',
+    'arrow-right',
+    'arrow-up',
+    'arrows-alt',
+    'arrows-alt-h',
+    'arrows-alt-v',
+    'assistive-listening-systems',
+    'asterisk',
+    'at',
+    'atlas',
+    'atom',
+    'audio-description',
+    'award',
+    'baby',
+    'baby-carriage',
+    'backspace',
+    'backward',
+    'bacon',
+    'balance-scale',
+    'balance-scale-left',
+    'balance-scale-right',
+    'ban',
+    'band-aid',
+    'barcode',
+    'bars',
+    'baseball-ball',
+    'basketball-ball',
+    'bath',
+    'battery-empty',
+    'battery-full',
+    'battery-half',
+    'battery-quarter',
+    'battery-three-quarters',
+    'bed',
+    'beer',
+    'bell',
+    'bell-slash',
+    'bezier-curve',
+    'bible',
+    'bicycle',
+    'biking',
+    'binoculars',
+    'biohazard',
+    'birthday-cake',
+    'blender',
+    'blender-phone',
+    'blind',
+    'blog',
+    'bold',
+    'bolt',
+    'bomb',
+    'bone',
+    'bong',
+    'book',
+    'book-dead',
+    'book-medical',
+    'book-open',
+    'book-reader',
+    'bookmark',
+    'border-all',
+    'border-none',
+    'border-style',
+    'bowling-ball',
+    'box',
+    'box-open',
+    'boxes',
+    'braille',
+    'brain',
+    'bread-slice',
+    'briefcase',
+    'briefcase-medical',
+    'broadcast-tower',
+    'broom',
+    'brush',
+    'bug',
+    'building',
+    'bullhorn',
+    'bullseye',
+    'burn',
+    'bus',
+    'bus-alt',
+    'business-time',
+    'calculator',
+    'calendar',
+    'calendar-alt',
+    'calendar-check',
+    'calendar-day',
+    'calendar-minus',
+    'calendar-plus',
+    'calendar-times',
+    'calendar-week',
+    'camera',
+    'camera-retro',
+    'campground',
+    'candy-cane',
+    'cannabis',
+    'capsules',
+    'car',
+    'car-alt',
+    'car-battery',
+    'car-crash',
+    'car-side',
+    'caret-down',
+    'caret-left',
+    'caret-right',
+    'caret-square-down',
+    'caret-square-left',
+    'caret-square-right',
+    'caret-square-up',
+    'caret-up',
+    'carrot',
+    'cart-arrow-down',
+    'cart-plus',
+    'cash-register',
+    'cat',
+    'certificate',
+    'chair',
+    'chalkboard',
+    'chalkboard-teacher',
+    'charging-station',
+    'chart-area',
+    'chart-bar',
+    'chart-line',
+    'chart-pie',
+    'check',
+    'check-circle',
+    'check-double',
+    'check-square',
+    'cheese',
+    'chess',
+    'chess-bishop',
+    'chess-board',
+    'chess-king',
+    'chess-knight',
+    'chess-pawn',
+    'chess-queen',
+    'chess-rook',
+    'chevron-circle-down',
+    'chevron-circle-left',
+    'chevron-circle-right',
+    'chevron-circle-up',
+    'chevron-down',
+    'chevron-left',
+    'chevron-right',
+    'chevron-up',
+    'child',
+    'church',
+    'circle',
+    'circle-notch',
+    'city',
+    'clinic-medical',
+    'clipboard',
+    'clipboard-check',
+    'clipboard-list',
+    'clock',
+    'clone',
+    'closed-captioning',
+    'cloud',
+    'cloud-download-alt',
+    'cloud-meatball',
+    'cloud-moon',
+    'cloud-moon-rain',
+    'cloud-rain',
+    'cloud-showers-heavy',
+    'cloud-sun',
+    'cloud-sun-rain',
+    'cloud-upload-alt',
+    'cocktail',
+    'code',
+    'code-branch',
+    'coffee',
+    'cog',
+    'cogs',
+    'coins',
+    'columns',
+    'comment',
+    'comment-alt',
+    'comment-dollar',
+    'comment-dots',
+    'comment-medical',
+    'comment-slash',
+    'comments',
+    'comments-dollar',
+    'compact-disc',
+    'compass',
+    'compress',
+    'compress-arrows-alt',
+    'concierge-bell',
+    'cookie',
+    'cookie-bite',
+    'copy',
+    'copyright',
+    'couch',
+    'credit-card',
+    'crop',
+    'crop-alt',
+    'cross',
+    'crosshairs',
+    'crow',
+    'crown',
+    'crutch',
+    'cube',
+    'cubes',
+    'cut',
+    'database',
+    'deaf',
+    'democrat',
+    'desktop',
+    'dharmachakra',
+    'diagnoses',
+    'dice',
+    'dice-d20',
+    'dice-d6',
+    'dice-five',
+    'dice-four',
+    'dice-one',
+    'dice-six',
+    'dice-three',
+    'dice-two',
+    'digital-tachograph',
+    'directions',
+    'divide',
+    'dizzy',
+    'dna',
+    'dog',
+    'dollar-sign',
+    'dolly',
+    'dolly-flatbed',
+    'donate',
+    'door-closed',
+    'door-open',
+    'dot-circle',
+    'dove',
+    'download',
+    'drafting-compass',
+    'dragon',
+    'draw-polygon',
+    'drum',
+    'drum-steelpan',
+    'drumstick-bite',
+    'dumbbell',
+    'dumpster',
+    'dumpster-fire',
+    'dungeon',
+    'edit',
+    'egg',
+    'eject',
+    'ellipsis-h',
+    'ellipsis-v',
+    'envelope',
+    'envelope-open',
+    'envelope-open-text',
+    'envelope-square',
+    'equals',
+    'eraser',
+    'ethernet',
+    'euro-sign',
+    'exchange-alt',
+    'exclamation',
+    'exclamation-circle',
+    'exclamation-triangle',
+    'expand',
+    'expand-arrows-alt',
+    'external-link-alt',
+    'external-link-square-alt',
+    'eye',
+    'eye-dropper',
+    'eye-slash',
+    'fan',
+    'fast-backward',
+    'fast-forward',
+    'fax',
+    'feather',
+    'feather-alt',
+    'female',
+    'fighter-jet',
+    'file',
+    'file-alt',
+    'file-archive',
+    'file-audio',
+    'file-code',
+    'file-contract',
+    'file-csv',
+    'file-download',
+    'file-excel',
+    'file-export',
+    'file-image',
+    'file-import',
+    'file-invoice',
+    'file-invoice-dollar',
+    'file-medical',
+    'file-medical-alt',
+    'file-pdf',
+    'file-powerpoint',
+    'file-prescription',
+    'file-signature',
+    'file-upload',
+    'file-video',
+    'file-word',
+    'fill',
+    'fill-drip',
+    'film',
+    'filter',
+    'fingerprint',
+    'fire',
+    'fire-alt',
+    'fire-extinguisher',
+    'first-aid',
+    'fish',
+    'fist-raised',
+    'flag',
+    'flag-checkered',
+    'flag-usa',
+    'flask',
+    'flushed',
+    'folder',
+    'folder-minus',
+    'folder-open',
+    'folder-plus',
+    'font',
+    'football-ball',
+    'forward',
+    'frog',
+    'frown',
+    'frown-open',
+    'funnel-dollar',
+    'futbol',
+    'gamepad',
+    'gas-pump',
+    'gavel',
+    'gem',
+    'genderless',
+    'ghost',
+    'gift',
+    'gifts',
+    'glass-cheers',
+    'glass-martini',
+    'glass-martini-alt',
+    'glass-whiskey',
+    'glasses',
+    'globe',
+    'globe-africa',
+    'globe-americas',
+    'globe-asia',
+    'globe-europe',
+    'golf-ball',
+    'gopuram',
+    'graduation-cap',
+    'greater-than',
+    'greater-than-equal',
+    'grimace',
+    'grin',
+    'grin-alt',
+    'grin-beam',
+    'grin-beam-sweat',
+    'grin-hearts',
+    'grin-squint',
+    'grin-squint-tears',
+    'grin-stars',
+    'grin-tears',
+    'grin-tongue',
+    'grin-tongue-squint',
+    'grin-tongue-wink',
+    'grin-wink',
+    'grip-horizontal',
+    'grip-lines',
+    'grip-lines-vertical',
+    'grip-vertical',
+    'guitar',
+    'h-square',
+    'hamburger',
+    'hammer',
+    'hamsa',
+    'hand-holding',
+    'hand-holding-heart',
+    'hand-holding-usd',
+    'hand-lizard',
+    'hand-middle-finger',
+    'hand-paper',
+    'hand-peace',
+    'hand-point-down',
+    'hand-point-left',
+    'hand-point-right',
+    'hand-point-up',
+    'hand-pointer',
+    'hand-rock',
+    'hand-scissors',
+    'hand-spock',
+    'hands',
+    'hands-helping',
+    'handshake',
+    'hanukiah',
+    'hard-hat',
+    'hashtag',
+    'hat-cowboy',
+    'hat-cowboy-side',
+    'hat-wizard',
+    'heading',
+    'headphones',
+    'headphones-alt',
+    'headset',
+    'heart',
+    'heart-broken',
+    'heartbeat',
+    'helicopter',
+    'highlighter',
+    'hiking',
+    'hippo',
+    'history',
+    'hockey-puck',
+    'holly-berry',
+    'home',
+    'horse',
+    'horse-head',
+    'hospital',
+    'hospital-alt',
+    'hospital-symbol',
+    'hot-tub',
+    'hotdog',
+    'hotel',
+    'hourglass',
+    'hourglass-end',
+    'hourglass-half',
+    'hourglass-start',
+    'house-damage',
+    'hryvnia',
+    'i-cursor',
+    'ice-cream',
+    'icicles',
+    'icons',
+    'id-badge',
+    'id-card',
+    'id-card-alt',
+    'igloo',
+    'image',
+    'images',
+    'inbox',
+    'indent',
+    'industry',
+    'infinity',
+    'info',
+    'info-circle',
+    'italic',
+    'jedi',
+    'joint',
+    'journal-whills',
+    'kaaba',
+    'key',
+    'keyboard',
+    'khanda',
+    'kiss',
+    'kiss-beam',
+    'kiss-wink-heart',
+    'kiwi-bird',
+    'landmark',
+    'language',
+    'laptop',
+    'laptop-code',
+    'laptop-medical',
+    'laugh',
+    'laugh-beam',
+    'laugh-squint',
+    'laugh-wink',
+    'layer-group',
+    'leaf',
+    'lemon',
+    'less-than',
+    'less-than-equal',
+    'level-down-alt',
+    'level-up-alt',
+    'life-ring',
+    'lightbulb',
+    'link',
+    'lira-sign',
+    'list',
+    'list-alt',
+    'list-ol',
+    'list-ul',
+    'location-arrow',
+    'lock',
+    'lock-open',
+    'long-arrow-alt-down',
+    'long-arrow-alt-left',
+    'long-arrow-alt-right',
+    'long-arrow-alt-up',
+    'low-vision',
+    'luggage-cart',
+    'magic',
+    'magnet',
+    'mail-bulk',
+    'male',
+    'map',
+    'map-marked',
+    'map-marked-alt',
+    'map-marker',
+    'map-marker-alt',
+    'map-pin',
+    'map-signs',
+    'marker',
+    'mars',
+    'mars-double',
+    'mars-stroke',
+    'mars-stroke-h',
+    'mars-stroke-v',
+    'mask',
+    'medal',
+    'medkit',
+    'meh',
+    'meh-blank',
+    'meh-rolling-eyes',
+    'memory',
+    'menorah',
+    'mercury',
+    'meteor',
+    'microchip',
+    'microphone',
+    'microphone-alt',
+    'microphone-alt-slash',
+    'microphone-slash',
+    'microscope',
+    'minus',
+    'minus-circle',
+    'minus-square',
+    'mitten',
+    'mobile',
+    'mobile-alt',
+    'money-bill',
+    'money-bill-alt',
+    'money-bill-wave',
+    'money-bill-wave-alt',
+    'money-check',
+    'money-check-alt',
+    'monument',
+    'moon',
+    'mortar-pestle',
+    'mosque',
+    'motorcycle',
+    'mountain',
+    'mouse',
+    'mouse-pointer',
+    'mug-hot',
+    'music',
+    'network-wired',
+    'neuter',
+    'newspaper',
+    'not-equal',
+    'notes-medical',
+    'object-group',
+    'object-ungroup',
+    'oil-can',
+    'om',
+    'otter',
+    'outdent',
+    'pager',
+    'paint-brush',
+    'paint-roller',
+    'palette',
+    'pallet',
+    'paper-plane',
+    'paperclip',
+    'parachute-box',
+    'paragraph',
+    'parking',
+    'passport',
+    'pastafarianism',
+    'paste',
+    'pause',
+    'pause-circle',
+    'paw',
+    'peace',
+    'pen',
+    'pen-alt',
+    'pen-fancy',
+    'pen-nib',
+    'pen-square',
+    'pencil-alt',
+    'pencil-ruler',
+    'people-carry',
+    'pepper-hot',
+    'percent',
+    'percentage',
+    'person-booth',
+    'phone',
+    'phone-alt',
+    'phone-slash',
+    'phone-square',
+    'phone-square-alt',
+    'phone-volume',
+    'photo-video',
+    'piggy-bank',
+    'pills',
+    'pizza-slice',
+    'place-of-worship',
+    'plane',
+    'plane-arrival',
+    'plane-departure',
+    'play',
+    'play-circle',
+    'plug',
+    'plus',
+    'plus-circle',
+    'plus-square',
+    'podcast',
+    'poll',
+    'poll-h',
+    'poo',
+    'poo-storm',
+    'poop',
+    'portrait',
+    'pound-sign',
+    'power-off',
+    'pray',
+    'praying-hands',
+    'prescription',
+    'prescription-bottle',
+    'prescription-bottle-alt',
+    'print',
+    'procedures',
+    'project-diagram',
+    'puzzle-piece',
+    'qrcode',
+    'question',
+    'question-circle',
+    'quidditch',
+    'quote-left',
+    'quote-right',
+    'quran',
+    'radiation',
+    'radiation-alt',
+    'rainbow',
+    'random',
+    'receipt',
+    'record-vinyl',
+    'recycle',
+    'redo',
+    'redo-alt',
+    'registered',
+    'remove-format',
+    'reply',
+    'reply-all',
+    'republican',
+    'restroom',
+    'retweet',
+    'ribbon',
+    'ring',
+    'road',
+    'robot',
+    'rocket',
+    'route',
+    'rss',
+    'rss-square',
+    'ruble-sign',
+    'ruler',
+    'ruler-combined',
+    'ruler-horizontal',
+    'ruler-vertical',
+    'running',
+    'rupee-sign',
+    'sad-cry',
+    'sad-tear',
+    'satellite',
+    'satellite-dish',
+    'save',
+    'school',
+    'screwdriver',
+    'scroll',
+    'sd-card',
+    'search',
+    'search-dollar',
+    'search-location',
+    'search-minus',
+    'search-plus',
+    'seedling',
+    'server',
+    'shapes',
+    'share',
+    'share-alt',
+    'share-alt-square',
+    'share-square',
+    'shekel-sign',
+    'shield-alt',
+    'ship',
+    'shipping-fast',
+    'shoe-prints',
+    'shopping-bag',
+    'shopping-basket',
+    'shopping-cart',
+    'shower',
+    'shuttle-van',
+    'sign',
+    'sign-in-alt',
+    'sign-language',
+    'sign-out-alt',
+    'signal',
+    'signature',
+    'sim-card',
+    'sitemap',
+    'skating',
+    'skiing',
+    'skiing-nordic',
+    'skull',
+    'skull-crossbones',
+    'slash',
+    'sleigh',
+    'sliders-h',
+    'smile',
+    'smile-beam',
+    'smile-wink',
+    'smog',
+    'smoking',
+    'smoking-ban',
+    'sms',
+    'snowboarding',
+    'snowflake',
+    'snowman',
+    'snowplow',
+    'socks',
+    'solar-panel',
+    'sort',
+    'sort-alpha-down',
+    'sort-alpha-down-alt',
+    'sort-alpha-up',
+    'sort-alpha-up-alt',
+    'sort-amount-down',
+    'sort-amount-down-alt',
+    'sort-amount-up',
+    'sort-amount-up-alt',
+    'sort-down',
+    'sort-numeric-down',
+    'sort-numeric-down-alt',
+    'sort-numeric-up',
+    'sort-numeric-up-alt',
+    'sort-up',
+    'spa',
+    'space-shuttle',
+    'spell-check',
+    'spider',
+    'spinner',
+    'splotch',
+    'spray-can',
+    'square',
+    'square-full',
+    'square-root-alt',
+    'stamp',
+    'star',
+    'star-and-crescent',
+    'star-half',
+    'star-half-alt',
+    'star-of-david',
+    'star-of-life',
+    'step-backward',
+    'step-forward',
+    'stethoscope',
+    'sticky-note',
+    'stop',
+    'stop-circle',
+    'stopwatch',
+    'store',
+    'store-alt',
+    'stream',
+    'street-view',
+    'strikethrough',
+    'stroopwafel',
+    'subscript',
+    'subway',
+    'suitcase',
+    'suitcase-rolling',
+    'sun',
+    'superscript',
+    'surprise',
+    'swatchbook',
+    'swimmer',
+    'swimming-pool',
+    'synagogue',
+    'sync',
+    'sync-alt',
+    'syringe',
+    'table',
+    'table-tennis',
+    'tablet',
+    'tablet-alt',
+    'tablets',
+    'tachometer-alt',
+    'tag',
+    'tags',
+    'tape',
+    'tasks',
+    'taxi',
+    'teeth',
+    'teeth-open',
+    'temperature-high',
+    'temperature-low',
+    'tenge',
+    'terminal',
+    'text-height',
+    'text-width',
+    'th',
+    'th-large',
+    'th-list',
+    'theater-masks',
+    'thermometer',
+    'thermometer-empty',
+    'thermometer-full',
+    'thermometer-half',
+    'thermometer-quarter',
+    'thermometer-three-quarters',
+    'thumbs-down',
+    'thumbs-up',
+    'thumbtack',
+    'ticket-alt',
+    'times',
+    'times-circle',
+    'tint',
+    'tint-slash',
+    'tired',
+    'toggle-off',
+    'toggle-on',
+    'toilet',
+    'toilet-paper',
+    'toolbox',
+    'tools',
+    'tooth',
+    'torah',
+    'torii-gate',
+    'tractor',
+    'trademark',
+    'traffic-light',
+    'train',
+    'tram',
+    'transgender',
+    'transgender-alt',
+    'trash',
+    'trash-alt',
+    'trash-restore',
+    'trash-restore-alt',
+    'tree',
+    'trophy',
+    'truck',
+    'truck-loading',
+    'truck-monster',
+    'truck-moving',
+    'truck-pickup',
+    'tshirt',
+    'tty',
+    'tv',
+    'umbrella',
+    'umbrella-beach',
+    'underline',
+    'undo',
+    'undo-alt',
+    'universal-access',
+    'university',
+    'unlink',
+    'unlock',
+    'unlock-alt',
+    'upload',
+    'user',
+    'user-alt',
+    'user-alt-slash',
+    'user-astronaut',
+    'user-check',
+    'user-circle',
+    'user-clock',
+    'user-cog',
+    'user-edit',
+    'user-friends',
+    'user-graduate',
+    'user-injured',
+    'user-lock',
+    'user-md',
+    'user-minus',
+    'user-ninja',
+    'user-nurse',
+    'user-plus',
+    'user-secret',
+    'user-shield',
+    'user-slash',
+    'user-tag',
+    'user-tie',
+    'user-times',
+    'users',
+    'users-cog',
+    'utensil-spoon',
+    'utensils',
+    'vector-square',
+    'venus',
+    'venus-double',
+    'venus-mars',
+    'vial',
+    'vials',
+    'video',
+    'video-slash',
+    'vihara',
+    'voicemail',
+    'volleyball-ball',
+    'volume-down',
+    'volume-mute',
+    'volume-off',
+    'volume-up',
+    'vote-yea',
+    'vr-cardboard',
+    'walking',
+    'wallet',
+    'warehouse',
+    'water',
+    'wave-square',
+    'weight',
+    'weight-hanging',
+    'wheelchair',
+    'wifi',
+    'wind',
+    'window-close',
+    'window-maximize',
+    'window-minimize',
+    'window-restore',
+    'wine-bottle',
+    'wine-glass',
+    'wine-glass-alt',
+    'won-sign',
+    'wrench',
+    'x-ray',
+    'yen-sign',
+    'yin-yang'
+];
+
+export default solid;
\ No newline at end of file
diff --git a/resources/assets/js/utils/utils.js b/resources/assets/js/utils/utils.js
index 6349ffd81..5c7e07158 100644
--- a/resources/assets/js/utils/utils.js
+++ b/resources/assets/js/utils/utils.js
@@ -89,5 +89,359 @@ export default {
         }
       
         return obj;
+      },
+      getData() {
+        return [{
+          code: "ZW",
+          name: "Zimbabwe",
+          created_at: "2015-04-24T01:46:50.459583",
+          updated_at: "2015-04-24T01:46:50.459593",
+          uri: "http://api.lobbyfacts.eu/api/1/country/245",
+          id: 245
+        }, {
+          code: "ZM",
+          name: "Zambia",
+          created_at: "2015-04-24T01:46:50.457459",
+          updated_at: "2015-04-24T01:46:50.457468",
+          uri: "http://api.lobbyfacts.eu/api/1/country/244",
+          id: 244
+        }, {
+          code: "YE",
+          name: "Yemen",
+          created_at: "2015-04-24T01:46:50.454731",
+          updated_at: "2015-04-24T01:46:50.454741",
+          uri: "http://api.lobbyfacts.eu/api/1/country/243",
+          id: 243
+        }, {
+          code: "EH",
+          name: "Western Sahara",
+          created_at: "2015-04-24T01:46:50.452002",
+          updated_at: "2015-04-24T01:46:50.452011",
+          uri: "http://api.lobbyfacts.eu/api/1/country/242",
+          id: 242
+        }, {
+          code: "WF",
+          name: "Wallis & Futuna",
+          created_at: "2015-04-24T01:46:50.449346",
+          updated_at: "2015-04-24T01:46:50.449355",
+          uri: "http://api.lobbyfacts.eu/api/1/country/241",
+          id: 241
+        }, {
+          code: "VN",
+          name: "Vietnam",
+          created_at: "2015-04-24T01:46:50.446644",
+          updated_at: "2015-04-24T01:46:50.446652",
+          uri: "http://api.lobbyfacts.eu/api/1/country/240",
+          id: 240
+        }, {
+          code: "VE",
+          name: "Venezuela",
+          created_at: "2015-04-24T01:46:50.444031",
+          updated_at: "2015-04-24T01:46:50.444040",
+          uri: "http://api.lobbyfacts.eu/api/1/country/239",
+          id: 239
+        }, {
+          code: "VU",
+          name: "Vanuatu",
+          created_at: "2015-04-24T01:46:50.441423",
+          updated_at: "2015-04-24T01:46:50.441433",
+          uri: "http://api.lobbyfacts.eu/api/1/country/238",
+          id: 238
+        }, {
+          code: "UZ",
+          name: "Uzbekistan",
+          created_at: "2015-04-24T01:46:50.438748",
+          updated_at: "2015-04-24T01:46:50.438757",
+          uri: "http://api.lobbyfacts.eu/api/1/country/237",
+          id: 237
+        }, {
+          code: "UY",
+          name: "Uruguay",
+          created_at: "2015-04-24T01:46:50.435761",
+          updated_at: "2015-04-24T01:46:50.435770",
+          uri: "http://api.lobbyfacts.eu/api/1/country/236",
+          id: 236
+        }, {
+          code: "VI",
+          name: "United States Virgin Islands",
+          created_at: "2015-04-24T01:46:50.433229",
+          updated_at: "2015-04-24T01:46:50.433238",
+          uri: "http://api.lobbyfacts.eu/api/1/country/235",
+          id: 235
+        }, {
+          code: "US",
+          name: "United States",
+          created_at: "2015-04-24T01:46:50.430335",
+          updated_at: "2015-04-24T01:46:50.430340",
+          uri: "http://api.lobbyfacts.eu/api/1/country/234",
+          id: 234
+        }, {
+          code: "GB",
+          name: "United Kingdom",
+          created_at: "2015-04-24T01:46:50.427956",
+          updated_at: "2015-04-24T01:46:50.427961",
+          uri: "http://api.lobbyfacts.eu/api/1/country/233",
+          id: 233
+        }, {
+          code: "AE",
+          name: "United Arab Emirates",
+          created_at: "2015-04-24T01:46:50.425383",
+          updated_at: "2015-04-24T01:46:50.425392",
+          uri: "http://api.lobbyfacts.eu/api/1/country/232",
+          id: 232
+        }, {
+          code: "UA",
+          name: "Ukraine",
+          created_at: "2015-04-24T01:46:50.422970",
+          updated_at: "2015-04-24T01:46:50.422980",
+          uri: "http://api.lobbyfacts.eu/api/1/country/231",
+          id: 231
+        }, {
+          code: "UG",
+          name: "Uganda",
+          created_at: "2015-04-24T01:46:50.419963",
+          updated_at: "2015-04-24T01:46:50.419968",
+          uri: "http://api.lobbyfacts.eu/api/1/country/230",
+          id: 230
+        }, {
+          code: "TV",
+          name: "Tuvalu",
+          created_at: "2015-04-24T01:46:50.417896",
+          updated_at: "2015-04-24T01:46:50.417906",
+          uri: "http://api.lobbyfacts.eu/api/1/country/229",
+          id: 229
+        }, {
+          code: "TC",
+          name: "Turks & Caicos Islands",
+          created_at: "2015-04-24T01:46:50.414854",
+          updated_at: "2015-04-24T01:46:50.414868",
+          uri: "http://api.lobbyfacts.eu/api/1/country/228",
+          id: 228
+        }, {
+          code: "TM",
+          name: "Turkmenistan",
+          created_at: "2015-04-24T01:46:50.412601",
+          updated_at: "2015-04-24T01:46:50.412605",
+          uri: "http://api.lobbyfacts.eu/api/1/country/227",
+          id: 227
+        }, {
+          code: "TR",
+          name: "Turkey",
+          created_at: "2015-04-24T01:46:50.411105",
+          updated_at: "2015-04-24T01:46:50.411110",
+          uri: "http://api.lobbyfacts.eu/api/1/country/226",
+          id: 226
+        }, {
+          code: "TN",
+          name: "Tunisia",
+          created_at: "2015-04-24T01:46:50.409535",
+          updated_at: "2015-04-24T01:46:50.409539",
+          uri: "http://api.lobbyfacts.eu/api/1/country/225",
+          id: 225
+        }, {
+          code: "TT",
+          name: "Trinidad & Tobago",
+          created_at: "2015-04-24T01:46:50.408030",
+          updated_at: "2015-04-24T01:46:50.408034",
+          uri: "http://api.lobbyfacts.eu/api/1/country/224",
+          id: 224
+        }, {
+          code: "TO",
+          name: "Tonga",
+          created_at: "2015-04-24T01:46:50.406306",
+          updated_at: "2015-04-24T01:46:50.406311",
+          uri: "http://api.lobbyfacts.eu/api/1/country/223",
+          id: 223
+        }, {
+          code: "TK",
+          name: "Tokelau",
+          created_at: "2015-04-24T01:46:50.404794",
+          updated_at: "2015-04-24T01:46:50.404799",
+          uri: "http://api.lobbyfacts.eu/api/1/country/222",
+          id: 222
+        }, {
+          code: "TG",
+          name: "Togo",
+          created_at: "2015-04-24T01:46:50.403306",
+          updated_at: "2015-04-24T01:46:50.403310",
+          uri: "http://api.lobbyfacts.eu/api/1/country/221",
+          id: 221
+        }, {
+          code: "TH",
+          name: "Thailand",
+          created_at: "2015-04-24T01:46:50.400840",
+          updated_at: "2015-04-24T01:46:50.400849",
+          uri: "http://api.lobbyfacts.eu/api/1/country/220",
+          id: 220
+        }, {
+          code: "TZ",
+          name: "Tanzania",
+          created_at: "2015-04-24T01:46:50.397846",
+          updated_at: "2015-04-24T01:46:50.397855",
+          uri: "http://api.lobbyfacts.eu/api/1/country/219",
+          id: 219
+        }, {
+          code: "TJ",
+          name: "Tajikistan",
+          created_at: "2015-04-24T01:46:50.394924",
+          updated_at: "2015-04-24T01:46:50.394933",
+          uri: "http://api.lobbyfacts.eu/api/1/country/218",
+          id: 218
+        }, {
+          code: "TW",
+          name: "Taiwan",
+          created_at: "2015-04-24T01:46:50.391969",
+          updated_at: "2015-04-24T01:46:50.391978",
+          uri: "http://api.lobbyfacts.eu/api/1/country/217",
+          id: 217
+        }, {
+          code: "SY",
+          name: "Syria",
+          created_at: "2015-04-24T01:46:50.389120",
+          updated_at: "2015-04-24T01:46:50.389124",
+          uri: "http://api.lobbyfacts.eu/api/1/country/216",
+          id: 216
+        }, {
+          code: "CH",
+          name: "Switzerland",
+          created_at: "2015-04-24T01:46:50.386939",
+          updated_at: "2015-04-24T01:46:50.386943",
+          uri: "http://api.lobbyfacts.eu/api/1/country/215",
+          id: 215
+        }, {
+          code: "SE",
+          name: "Sweden",
+          created_at: "2015-04-24T01:46:50.385345",
+          updated_at: "2015-04-24T01:46:50.385349",
+          uri: "http://api.lobbyfacts.eu/api/1/country/214",
+          id: 214
+        }, {
+          code: "SZ",
+          name: "Swaziland",
+          created_at: "2015-04-24T01:46:50.383834",
+          updated_at: "2015-04-24T01:46:50.383838",
+          uri: "http://api.lobbyfacts.eu/api/1/country/213",
+          id: 213
+        }, {
+          code: "SR",
+          name: "Suriname",
+          created_at: "2015-04-24T01:46:50.382073",
+          updated_at: "2015-04-24T01:46:50.382078",
+          uri: "http://api.lobbyfacts.eu/api/1/country/212",
+          id: 212
+        }, {
+          code: "SD",
+          name: "Sudan",
+          created_at: "2015-04-24T01:46:50.380114",
+          updated_at: "2015-04-24T01:46:50.380119",
+          uri: "http://api.lobbyfacts.eu/api/1/country/211",
+          id: 211
+        }, {
+          code: "LK",
+          name: "Sri Lanka",
+          created_at: "2015-04-24T01:46:50.378189",
+          updated_at: "2015-04-24T01:46:50.378195",
+          uri: "http://api.lobbyfacts.eu/api/1/country/210",
+          id: 210
+        }, {
+          code: "ES",
+          name: "Spain",
+          created_at: "2015-04-24T01:46:50.376105",
+          updated_at: "2015-04-24T01:46:50.376109",
+          uri: "http://api.lobbyfacts.eu/api/1/country/209",
+          id: 209
+        }, {
+          code: "SS",
+          name: "South Sudan",
+          created_at: "2015-04-24T01:46:50.373942",
+          updated_at: "2015-04-24T01:46:50.373946",
+          uri: "http://api.lobbyfacts.eu/api/1/country/208",
+          id: 208
+        }, {
+          code: "KR",
+          name: "South Korea",
+          created_at: "2015-04-24T01:46:50.371790",
+          updated_at: "2015-04-24T01:46:50.371794",
+          uri: "http://api.lobbyfacts.eu/api/1/country/207",
+          id: 207
+        }, {
+          code: "GS",
+          name: "South Georgia & The South Sandwish Islands",
+          created_at: "2015-04-24T01:46:50.369460",
+          updated_at: "2015-04-24T01:46:50.369465",
+          uri: "http://api.lobbyfacts.eu/api/1/country/206",
+          id: 206
+        }, {
+          code: "ZA",
+          name: "South Africa",
+          created_at: "2015-04-24T01:46:50.367247",
+          updated_at: "2015-04-24T01:46:50.367252",
+          uri: "http://api.lobbyfacts.eu/api/1/country/205",
+          id: 205
+        }, {
+          code: "SO",
+          name: "Somaliland",
+          created_at: "2015-04-24T01:46:50.362905",
+          updated_at: "2016-09-18T18:34:35.724427",
+          uri: "http://api.lobbyfacts.eu/api/1/country/204",
+          id: 204
+        }, {
+          code: "SB",
+          name: "Solomon Islands",
+          created_at: "2015-04-24T01:46:50.360631",
+          updated_at: "2015-04-24T01:46:50.360635",
+          uri: "http://api.lobbyfacts.eu/api/1/country/203",
+          id: 203
+        }, {
+          code: "SI",
+          name: "Slovenia",
+          created_at: "2015-04-24T01:46:50.358394",
+          updated_at: "2015-04-24T01:46:50.358399",
+          uri: "http://api.lobbyfacts.eu/api/1/country/202",
+          id: 202
+        }, {
+          code: "SK",
+          name: "Slovakia",
+          created_at: "2015-04-24T01:46:50.356154",
+          updated_at: "2015-04-24T01:46:50.356158",
+          uri: "http://api.lobbyfacts.eu/api/1/country/201",
+          id: 201
+        }, {
+          code: "SX",
+          name: "Sint Maarten",
+          created_at: "2015-04-24T01:46:50.353807",
+          updated_at: "2015-04-24T01:46:50.353811",
+          uri: "http://api.lobbyfacts.eu/api/1/country/200",
+          id: 200
+        }, {
+          code: "SG",
+          name: "Singapore",
+          created_at: "2015-04-24T01:46:50.349354",
+          updated_at: "2015-04-24T01:46:50.349358",
+          uri: "http://api.lobbyfacts.eu/api/1/country/199",
+          id: 199
+        }, {
+          code: "SL",
+          name: "Sierra Leone",
+          created_at: "2015-04-24T01:46:50.347186",
+          updated_at: "2015-04-24T01:46:50.347190",
+          uri: "http://api.lobbyfacts.eu/api/1/country/198",
+          id: 198
+        }, {
+          code: "SC",
+          name: "Seychelles",
+          created_at: "2015-04-24T01:46:50.344980",
+          updated_at: "2015-04-24T01:46:50.344984",
+          uri: "http://api.lobbyfacts.eu/api/1/country/197",
+          id: 197
+        }, {
+          code: "RS",
+          name: "Serbia",
+          created_at: "2015-04-24T01:46:50.342496",
+          updated_at: "2015-04-24T01:46:50.342501",
+          uri: "http://api.lobbyfacts.eu/api/1/country/196",
+          id: 196
+        }];
       }
+      
 }
\ No newline at end of file