🎉 Vue-icons (a react-icons equivalent) is finally here, LFG

If you've ever used React, you've probably come across the excellent react-icons library — a single, tree-shakeable, well-typed icon package that just works.

But for Vue developers? The icon ecosystem has felt scattered and inconsistent... until now.

👉 Say hello to Vue Icons Library — a modern, TypeScript-first icon library designed specifically for Vue.

🔗 Quick Links

• 🧑‍💻 Visit the Website

• 📦 GitHub Repository

• 🚀 Install Now:

npm install vue-icons-lib

🔍 What is Vue Icons Library?

Vue Icons Library is the Vue 3 equivalent of react-icons — a comprehensive, zero-dependency, tree-shakeable icon library that bundles 7+ popular icon sets into a single, intuitive API.

Built with modern Vue tooling, it brings performance, type safety, and simplicity to working with icons in your Vue apps.

🎯 Key Features

• ✅ Tree-shakeable by design – Only the icons you import are included in your bundle

• 💡 TypeScript-first – Full type definitions with IDE IntelliSense

• 🧩 Built for Vue 3 – Composition API, script setup support, and reactivity-ready

• ⚡ Lightweight & Fast – Clean SVGs, optimized build pipeline

• 🧱 Consistent API – Unified props (size, color, class, etc.) across all icons

• ♿ Accessible – Proper viewBox and accessible by default

• 🌐 SSR Compatible – Works great with Nuxt, Vite SSR, etc.

🎨 Included Icon Sets

Vue Icons Library ships with thousands of icons from your favorite sets:

• Ant Design Icons
• Box Icons
• Circum Icons
• CSS.gg Icons
• Dev Icons
• Feather Icons

More sets (like Material Icons and Heroicons) are coming soon!

⚙️ Getting Started

Installation:

npm install vue-icons-lib

Basic usage:

<script setup> import { FiHeart } from 'vue-icons-lib/fi'; import { AiFillStar } from 'vue-icons-lib/ai'; import { BxHome } from 'vue-icons-lib/bx'; </script> <template> <div> <FiHeart color="#ff6b6b" size="24px" /> <AiFillStar color="#ffd700" /> <BxHome class="home-icon" /> </div> </template> 

Advanced Example:

<script setup> import { FiHeart } from "vue-icons-lib/fi"; function handleClick() { console.log("Heart clicked!"); } </script> <template> <FiHeart size="32px" color="#ff6b6b" class="heart-icon" style="cursor: pointer; transition: transform 0.2s;" @click="handleClick" /> </template> 

🚀 Real-World Usage Example:

<script setup> import { FiHeart, FiStar, FiShare, FiBookmark } from "vue-icons-lib/fi"; const props = defineProps<{ isLiked: boolean; isStarred: boolean; }>(); </script> <template> <div class="action-buttons"> <FiHeart :color="isLiked ? '#ff6b6b' : '#666'" size="20px" class="action-icon" @click="$emit('toggle-like')" /> <FiStar :color="isStarred ? '#ffd700' : '#666'" size="20px" class="action-icon" @click="$emit('toggle-star')" /> <FiShare size="20px" class="action-icon" @click="$emit('share')" /> <FiBookmark size="20px" class="action-icon" @click="$emit('bookmark')" /> </div> </template> 

📦 Bundle Optimization

Before (bad):

<script setup> import * as Icons from 'some-icon-library'; // 😱 All icons are bundled </script> 

After (with Vue Icons Library):

<script setup> import { FiHeart, FiStar } from 'vue-icons-lib/fi'; // ✅ Only what you need </script> 

Result? ⚡ Smaller bundle size and faster load times — especially important for production apps.

🧪 Compatibility & Support

✅ Vue 2 & 3.x

✅ Vite, Webpack, Rollup

✅ TypeScript

✅ SSR (Nuxt.js, etc.)

✅ Tree-shaking compatible bundlers

✅ All modern browsers

🤝 Get Involved

Vue Icons Library is open source and welcomes contributions!

• 💬 Submit issues or feature requests

• 🛠 Add more icon sets or improve performance

• 🧾 Help refine the docs and examples

• 🌟 Star the repo if you like the project!

GitHub → github.com/vue-icons-lib

👉 Explore the icons and docs site here