Notoriously Punctual Manatee


    3.0.5 • Public • Published

    ⛄️ Vue Ionicons

    Vue Icon Set Components from Ionic Team

    License Travis version downloads

    Design icons sourced from the Ionicons project.

    🎉 Demo

    🚀 Getting started

    1. Install the package

      # NPM 
      npm install --save vue-ionicons
      # Yarn 
      yarn add vue-ionicons
    2. Import the icon, and declare it as a local component:

      import AlertIcon from 'vue-ionicons/dist/ios-alert.vue'
      // OR using transpiled js version
      // import AlertIcon from 'vue-ionicons/dist/js/ios-alert'
      components: {


      Declare it as a global component:

      import AlertIcon from 'vue-ionicons/dist/ios-alert.vue'
      // OR using transpiled js version
      // import AlertIcon from 'vue-ionicons/dist/js/ios-alert'
      Vue.component('alert-icon', AlertIcon)

      Note Icon files are kebab cased, e.g. alert-circle.vue. All icon generated can be see in dist folder.

    3. Include global CSS/SCSS in your main.js

      # Using plain css
      # Or using SCSS import
    4. Then use it in your template code!

      <AlertIcon />

    Import some icon sets

    Sometimes we don't want import one by one, so from v2.3.0 we can include this groups icon: ios, md, logo.

    import AllIosIcon from 'vue-ionicons/dist/ionicons-ios.js'
    -- File available --
    Material: ionicons-md.js
    Logo: ionicons-logo.js
    All: ionicons.js

    Then you already can use component in your template, component tag is same with filename with adding -icon in postfix.


    <ios-add-circle-outline-icon />
    <ios-add-circle-icon />
    <md-add-circle-outline-icon />
    <md-add-circle-icon />

    🔥 API and Props

    Name Type Default Description
    w String 14px Width of SVG
    h String 14px Height of SVG
    rootClass String empty Class for wrapper SVG
    animate String empty Available: rotate, shake, beat

    🏃 Development

    Checkout with submodule :

    git clone
    git submodule init
    git submodule update --remote

    Run demo

    npm run dev

    Build demo

    npm run build

    Build new distribute icon

    npm run dist

    👍 Tips

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

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

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

    💵 Credits

    Support me

    🎁 Contributing

    If you'd like to contribute, head to the contributing guidelines. Inside you'll find directions for opening issues, coding standards, and notes on development.

    Copyright © 2017 Built with ❤️ by Irfan Maulana


    npm i vue-ionicons

    DownloadsWeekly Downloads






    Unpacked Size

    3.5 MB

    Total Files


    Last publish


    • irfan.maulana