{"id":12504,"library":"vue-iconsax","title":"Iconsax Icon Pack for Vue","description":"vue-iconsax is a JavaScript package providing a comprehensive set of Iconsax icons specifically designed for Vue 3 applications. It is currently at version 2.0.0 and focuses on delivering 6000 icons across 6 distinct design styles (Linear, Outline, TwoTone, Bulk, Broken, Bold), all meticulously crafted on a 24px grid. The library emphasizes lightweight usage and ease of integration, differentiating itself by exclusively supporting Vue 3 and offering dynamic icon loading through a single `VsxIcon` component. This approach streamlines icon usage by eliminating the need for individual icon imports, enabling developers to render any available icon simply by passing its PascalCase name as a prop. The package's release cadence appears tied to updates from the core Iconsax library and Vue 3 ecosystem developments.","status":"active","version":"2.0.0","language":"javascript","source_language":"en","source_url":"https://github.com/JaxThePrime/vue-iconsax","tags":["javascript","vue","icons","iconsax","icon components","vue components"],"install":[{"cmd":"npm install vue-iconsax","lang":"bash","label":"npm"},{"cmd":"yarn add vue-iconsax","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-iconsax","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for Vue 3 component integration. The library is built exclusively for Vue 3.","package":"vue","optional":false}],"imports":[{"note":"The primary and typically only component for rendering all Iconsax icons dynamically via props. This library is ESM-only since v2.0.0 and explicitly requires Vue 3. Using CommonJS `require` will lead to errors.","wrong":"const VsxIcon = require('vue-iconsax')","symbol":"VsxIcon","correct":"import { VsxIcon } from 'vue-iconsax'"},{"note":"When registering globally with `app.component('VsxIcon', VsxIcon)`, ensure it's a named import. Attempting a default import will fail as `vue-iconsax` exports `VsxIcon` as a named export.","wrong":"import VsxIcon from 'vue-iconsax'","symbol":"VsxIcon (for global registration)","correct":"import { VsxIcon } from 'vue-iconsax'"},{"note":"When importing for local component registration, ensure `VsxIcon` is spelled with correct PascalCase. JavaScript is case-sensitive, and a mismatch will prevent the component from being resolved.","wrong":"import { Vsxicon } from 'vue-iconsax'","symbol":"VsxIcon (for local registration)","correct":"import { VsxIcon } from 'vue-iconsax'"}],"quickstart":{"code":"import { createApp, ref } from 'vue';\nimport App from './App.vue';\nimport { VsxIcon } from 'vue-iconsax';\n\n// main.js - Global registration of VsxIcon component\nconst app = createApp(App);\napp.component('VsxIcon', VsxIcon);\napp.mount('#app');\n\n// App.vue - Example usage in a Vue component\nexport default {\n name: 'App',\n setup() {\n const iconNames = ['Activity', 'Archive1', 'Bookmark', 'Chart', 'Cloud'];\n let currentIndex = ref(0);\n const currentIcon = ref(iconNames[currentIndex.value]);\n\n const cycleIcon = () => {\n currentIndex.value = (currentIndex.value + 1) % iconNames.length;\n currentIcon.value = iconNames[currentIndex.value];\n };\n\n return {\n currentIcon,\n cycleIcon\n };\n },\n template: `\n
\n

Dynamic Iconsax Demo

\n \n

Current Icon: {{ currentIcon }}

\n \n
\n `\n};","lang":"javascript","description":"This example demonstrates how to globally register the `VsxIcon` component in `main.js` and then dynamically change the displayed icon in an `App.vue` component using Vue 3's Composition API."},"warnings":[{"fix":"Ensure your project is running Vue 3.x. If using Vue 2, you must either upgrade your Vue project or find an alternative icon library compatible with Vue 2.","message":"vue-iconsax v2.0.0 and subsequent versions are exclusively designed for Vue 3 and are not compatible with Vue 2 applications. Attempting to use it in a Vue 2 project will result in runtime errors.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Always refer to the official Iconsax documentation or browse the available icons to ensure the exact PascalCase name is used for the `iconName` prop.","message":"The `iconName` prop for the `VsxIcon` component strictly requires icon names to be provided in PascalCase (e.g., 'Add', 'Home', 'UserSearch'). Using kebab-case, snake_case, or any other casing will result in the icon not rendering.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Always use the `VsxIcon` component and pass the desired icon name as a string to the `iconName` prop.","message":"This library does not support individual icon component imports (e.g., `import { AddIcon } from 'vue-iconsax'`). All icons are dynamically loaded and rendered solely through the generic `VsxIcon` component by specifying the icon's name via the `iconName` prop.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"search_vec":"'2.0.0':31 '24px':54 '3':24,71,127 '6':39 '6000':36 'across':38 'appear':116 'applic':25 'approach':83 'avail':100 'bold':48 'broken':47 'bulk':46 'cadenc':115 'compon':81,135,137 'comprehens':15 'core':122 'craft':51 'current':28 'deliv':35 'design':21,41 'develop':96,129 'differenti':65 'distinct':40 'dynam':74 'eas':62 'ecosystem':128 'elimin':88 'emphas':58 'enabl':95 'exclus':68 'focus':33 'grid':55 'icon':2,19,37,75,85,93,101,132,134 'iconsax':1,8,18,123,133 'import':94 'individu':92 'integr':64 'javascript':11,130 'librari':57,124 'lightweight':59 'linear':43 'load':76 'meticul':50 'name':107 'need':90 'offer':73 'outlin':44 'pack':3 'packag':12,112 'pascalcas':106 'pass':104 'prop':110 'provid':13 'releas':114 'render':98 'set':16 'simpli':102 'singl':79 'specif':20 'streamlin':84 'style':42 'support':69 'tie':117 'twoton':45 'updat':119 'usag':60,86 'version':30 'vsxicon':80 'vue':5,7,23,70,126,131,136 'vue-iconsax':6","created_at":"2026-04-19T13:43:30.997241+00:00","updated_at":"2026-04-19T13:43:30.997241+00:00","problems":[{"fix":"Globally register the component in your `main.js` file using `app.component('VsxIcon', VsxIcon)` or import and declare it in the `components` option of your specific Vue component.","cause":"The `VsxIcon` component has not been correctly registered within your Vue application, either globally or locally.","error":"Failed to resolve component: VsxIcon"},{"fix":"Double-check that the `iconName` prop exactly matches an existing Iconsax icon in PascalCase and that the `type` prop (e.g., 'linear', 'bold', 'broken') is one of the six supported values and correctly spelled.","cause":"This usually indicates an incorrect `iconName` prop value (e.g., misspelled, wrong casing) or an invalid `type` prop.","error":"Icon not displaying, or showing as a blank space/broken image."},{"fix":"Ensure your project is configured for ES Modules. If using Node.js, add `\"type\": \"module\"` to your `package.json` or use `.mjs` file extensions. For bundlers like Webpack or Vite, ensure they are configured to handle ES Modules correctly.","cause":"This error occurs when trying to use ES module `import` syntax in a CommonJS environment (e.g., older Node.js versions or misconfigured bundlers). `vue-iconsax` is an ESM-only package.","error":"Uncaught SyntaxError: Cannot use import statement outside a module"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":null,"github":"https://github.com/JaxThePrime/vue-iconsax","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/vue-iconsax","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}