Everything you need to know to build stunning, animated interfaces with the world's most versatile icon library.
Flux Icons is not just another SVG pack. It is a comprehensive design system built specifically for modern frameworks like Vue 3 and Nuxt 3. Unlike traditional icon fonts, Flux Icons leverages the power of components to deliver:
Install the package via your favorite package manager:
npm install flux-icons-pro-packRegister the plugin in your plugins/flux-icons.ts file:
import { defineNuxtPlugin } from '#app'
import FluxIcons from 'flux-icons-pro-pack'
import 'flux-icons-pro-pack/dist-font/flux-icons.css' // Import CSS for animations
export default defineNuxtPlugin((nuxtApp) => {
nuxtApp.vueApp.use(FluxIcons)
}) Bring your UI to life with our built-in micro-interactions. No extra CSS or JS required. Just add the animation prop to any icon.
<FluxIcon name="bell" animation="shake" />Why settle for standard icons? With our exclusive Icon Mixer, you can combine any two icons to create unique, meaningful symbols for your application.
Create combinations like "Secure Folder", "User Pro", "Add to Cart" and more.
Elevate your design with our premium Liquid Glass icons. These are not just SVGs; they are crafted with gradients, opacity layers, and blur effects.
| Prop | Type | Default | Description |
|---|---|---|---|
| name | String | - | Icon name (e.g. "home"). |
| size | Number | String | 24 | Size in pixels. |
| animation | String | "" | Hover effect. |
| color | String | currentColor | Fill or stroke color. |
Yes! Flux Icons is open-source and free for both personal and commercial projects. You can use it in your apps, websites, and designs without any cost.
Currently, we have a dedicated Vue 3 / Nuxt 3 component. However, you can easily use the raw SVG code (available in our library) in React, Svelte, or vanilla HTML projects.
Absolutely. The library is designed to be tree-shakeable, meaning only the icons you actually use will be included in your final JavaScript bundle, keeping your app fast and lightweight.
You can change the color using standard Tailwind classes (like `text-red-500`) or the `color` prop. The `size` prop adjusts the dimensions, and the `stroke-width` (for outline icons) is also customizable.