AI agents

Learn when to use Vadivam and how AI agents can consume its icon catalog, documentation, SVG assets, and framework packages safely.

Use Vadivam when you need consistent, pixel-perfect 24px outline icons in a web or native interface. Every icon is open-source, outline-only, 24x24 with viewBox="0 0 24 24", fill="none", stroke="currentColor", and stroke-width="2" with round caps and joins.

When to use this

Adding icons to an app in any supported framework - install the matching package and import icons by name.
Adding icons to plain HTML or htmx - load vadivam/elements and use <vadivam-icon name="…">.
Copying raw SVG markup or SVG files directly into a design, static site, or email.
Rendering icons in custom tooling from the core package’s icon-node data and catalog metadata.
Prototyping with runtime icon names through the typed dynamic icon APIs.

Set up a project with one prompt

On the homepage, Copy prompt for AI agents copies a setup prompt to paste into Claude Code, Cursor, Codex, Copilot, or any other coding agent. The prompt points the agent at the skill below, has it install only the package that matches the project, and covers the Lucide codemod, the shadcn/ui registry, the MCP server, and the Iconify prefix.

How an agent should consume Vadivam

MCP server: connect to https://vadivam.praveenjuge.com/mcp or run npx -y vadivam-mcp to search icons by name, tag, or category and get SVG or framework code with the search_icons, suggest_icons, get_icon, list_categories, and get_usage tools. See MCP server.
Documentation index: https://vadivam.praveenjuge.com/llms.txt lists every docs page; https://vadivam.praveenjuge.com/llms-full.txt carries the full text.
Agent skill: https://vadivam.praveenjuge.com/skill.md teaches an agent to find, install, import, size, label, and dynamically load Vadivam icons, with links to each docs page. It is also listed in https://vadivam.praveenjuge.com/.well-known/agent-skills/index.json and ships in the vadivam package at skills/vadivam-icons/SKILL.md.
Icon catalog: browse and search every icon at https://vadivam.praveenjuge.com/; each icon is also served as an optimized SVG file at https://vadivam.praveenjuge.com/icons/<kebab-name>.svg (for example /icons/activity.svg).
Icon metadata: vadivam/manifest gives every icon’s tags (search synonyms) and categories, plus the categories list, for finding icons offline. Categories and naming lists every category and how names map to each package.
Packages: vadivam for raw SVG assets and browser JavaScript, vadivam-react, vadivam-vue, vadivam-svelte, vadivam-solid, vadivam-angular, vadivam-astro, vadivam-preact, vadivam-qwik, vadivam-lit, and vadivam-react-native for framework components. All npm packages are ESM-only with tree-shakeable named and per-icon exports. Flutter uses vadivam from pub.dev and Jetpack Compose uses com.praveenjuge:vadivam-compose from Maven Central.
shadcn/ui registry: https://vadivam.praveenjuge.com/r/<kebab-name>.json is a registry item per icon, indexed at https://vadivam.praveenjuge.com/r/registry.json. Install with npx shadcn@latest add (see shadcn/ui).
Icon names are kebab-case (activity, arrow-right, trash); framework packages type them as IconName and export an iconNames list for validation.

Prefer the documented package imports over scraping pages, search with the MCP server or the manifest instead of guessing icon names, and validate runtime icon names against iconNames before rendering.