Obiwan Pelosi

Posted on Jun 29

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

#webdev #vue #javascript #programming

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

DEV Community