Vadivam

Explore Vadivam’s pixel-perfect 24px outline and solid icons and learn how to use them as SVG assets or components across modern UI frameworks.

Vadivam is an open-source set of 1999 pixel-perfect 24px icons, each in an outline and a solid style. Use optimized SVG assets, a <vadivam-icon> element, or native components for web frameworks, React Native, Flutter, and Jetpack Compose.

Designers can use the bundled, offline Figma plugin to search the same canonical catalog and place editable local components.

Get started

Install the package for your stack:

npm install vadivam-react

Render a statically imported icon:

import { Activity } from "vadivam-react";

export function Status() {
  return <Activity size={20} aria-label="Activity" />;
}

Static named imports are tree-shakeable and are the best default when the icon is known while writing the application. Use a dynamic icon API only when an icon name comes from data at runtime.

Choose a package

All npm packages are ESM-only. Icon components accept native SVG attributes in addition to Vadivam’s sizing and stroke props. See installation for peer requirements, usage for styling, and accessibility for labeling.

Browse the icon catalog. Icon names use kebab case in data APIs, such as activity and arrow-right, and PascalCase for component imports, such as Activity and ArrowRight. See Categories and naming.

Next steps

• Install the right package
• Use raw SVGs and JavaScript
• Style icons
• Label icons for assistive technology
• Load icons from runtime names
• Migrate from Lucide
• Use Vadivam with AI agents
• Place icons in Figma
• Contribute icons or code