/ Icon

Vue Icon Set Components from Ionic Team

Vue Icon Set Components from Ionic Team


Vue Icon Set Components from Ionic Team

Design Icons, sourced from the Ionicons project.

Getting started

  1. Install the package

    $ npm install --save vue-ionicons


    $ yarn add vue-ionicons
  2. Import the icon, and declare it as a local component:

    import AlertIcon from 'vue-ionicons/alert.vue'
    components: {


    Declare it as a global component:

    import AlertIcon from 'vue-ionicons/alert.vue'
    Vue.component('menu-icon', AlertIcon)

    Note Icon files are kebab cased, e.g. alert-circle.vue, and
    their default name has -icon appended e.g. alert-circle-icon.

  3. Then use it in your template code!

    <menu-icon />


A list of the icons can be found at the Ionicons Repository


  • Use resolve in your Webpack config to clean up the imports:

    resolve: {
       alias : {
         "icons": path.resolve(__dirname, "node_modules/vue-ionicons")
      extensions: [

    This will give you much shorter and more readable imports, like
    import Android from 'icons/android', rather than
    import Android from 'vue-ionicons/android.vue'. Much better!