Vadivam

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

Vadivam is an open-source set of 280 pixel-perfect 24px outline icons. Use optimized SVG assets, browser JavaScript helpers, or native components for React, React Native, Vue, Svelte, Solid, Angular, Astro, and Preact.

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 packages are ESM-only. Icon components accept native SVG attributes in addition to Vadivam’s sizing and stroke props. See installation for peer requirements and usage for styling and accessibility guidance.

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.

Next steps

• Install the right package
• Use raw SVGs and JavaScript
• Style and label icons
• Load icons from runtime names
• Contribute icons or code