Installation

Install the right Vadivam icon package and its peer dependencies for your framework, from React and Vue to Flutter and Jetpack Compose.

Install only the package for the environment where the icons render. Every Vadivam npm package is ESM-only and publishes tree-shakeable named and per-icon exports.

Package commands

Install the package for your stack

# SVG assets, browser JavaScript, and <vadivam-icon> for HTML and htmx
npm install vadivam

# Web frameworks
npm install vadivam-react
npm install vadivam-vue
npm install vadivam-svelte
npm install vadivam-solid
npm install vadivam-angular
npm install vadivam-astro
npm install vadivam-preact
npm install vadivam-qwik
npm install vadivam-lit

# React Native or Expo
npm install vadivam-react-native react-native-svg

# Flutter
flutter pub add vadivam

For Jetpack Compose and Android Views, add com.praveenjuge:vadivam-compose from Maven Central. See Jetpack Compose.

Use your package manager

The same package names work with other package managers:

npm install vadivam-react

pnpm add vadivam-react

bun add vadivam-react

yarn add vadivam-react

Import an icon

Use a named import in application code, then read Import styles for per-icon and asset paths:

import { Activity, Search } from "vadivam-react";

Using shadcn/ui? Every icon is also a registry item that copies a self-contained React component into your project with no package to install. See shadcn/ui.

Peer requirements

The current packages declare these peer ranges:

Package	Peer dependencies
`vadivam-react`	React 18 or newer
`vadivam-react-native`	React 18–19, React Native 0.71+, and `react-native-svg` 12–15
`vadivam-vue`	Vue 3.5
`vadivam-svelte`	Svelte 5.56+
`vadivam-solid`	Solid 1.9
`vadivam-angular`	Angular 22
`vadivam-astro`	Astro 7
`vadivam-preact`	Preact 10.29
`vadivam-qwik`	Qwik 2 (`@qwik.dev/core`)
`vadivam-lit`	Lit 3

The Flutter package needs Flutter 3.29 or newer. The Compose package needs Android API 23 or newer and Compose UI 1.8 or newer.

Check the installed package’s peer dependency warnings when upgrading a framework. The package export maps are intentionally version-specific for several framework integrations.

Import styles

Use a named import for normal application code:

import { Activity, Search } from "vadivam-react";

A per-icon import is also available:

import Activity from "vadivam-react/activity";
// Equivalent explicit path:
import Search from "vadivam-react/icons/search";

The framework packages also expose /dynamic and /dynamicIconImports entry points. Those are intended for names selected at runtime; see Dynamic icons.

The core package exposes different values at its icon paths:

import activityNode from "vadivam/icons/activity";
import activitySvgUrl from "vadivam/icons/activity.svg";

The first import is an icon-node data structure. The second is the optimized SVG asset path, interpreted according to your bundler’s asset handling. Learn more in Core SVG and JavaScript.