2,020 icons24px grid2px strokeMIT

Icons shaped for interfaces.

Name: Vadivam Icons
Author: Praveen Juge

Vadivam (வடிவம்) is Tamil for “shape.” Free, open-source icons for React, React Native, Vue, Svelte, Solid, Preact, Astro, Angular, and SVG, with shadcn/ui, MCP, Iconify, and Figma.

Set up Vadivam icons in this project (https://vadivam.praveenjuge.com).

Vadivam is an open-source set of pixel-perfect 24px outline icons. Icon names and component APIs match Lucide. Read https://vadivam.praveenjuge.com/skill.md first and follow it.

1. Check the project manifest (package.json, pubspec.yaml, or build.gradle) and install only the package that matches this project:
   - React: vadivam-react
   - React Native or Expo: vadivam-react-native and react-native-svg
   - Vue: vadivam-vue
   - Svelte: vadivam-svelte
   - Solid: vadivam-solid
   - Preact: vadivam-preact
   - Astro: vadivam-astro
   - Angular: vadivam-angular
   - Qwik: vadivam-qwik
   - Lit: vadivam-lit
   - Flutter: vadivam from pub.dev
   - Jetpack Compose: com.praveenjuge:vadivam-compose from Maven Central
   - Anything else, including plain HTML and htmx: vadivam (SVG files, SVG strings, a sprite, an icon font, JavaScript helpers, and the `<vadivam-icon>` element from vadivam/elements)
2. If the project uses Lucide, preview the switch with `npx vadivam migrate-lucide`, then apply it with `npx vadivam migrate-lucide --write`.
3. If the project uses shadcn/ui and needs only a few icons, add each one as a local component instead: `npx shadcn@latest add https://vadivam.praveenjuge.com/r/<icon-name>.json`.
4. Connect the Vadivam MCP server so you can search icons instead of guessing names. Hosted: https://vadivam.praveenjuge.com/mcp (Streamable HTTP, no API key). Local: `npx -y vadivam-mcp`. In Claude Code: `claude mcp add --transport http vadivam https://vadivam.praveenjuge.com/mcp`.
5. If the project already uses Iconify or unplugin-icons, use the `vadivam` prefix, such as `vadivam:arrow-right`.

Rules:
- Never guess an icon name. Search with the MCP `search_icons` tool or the `vadivam/manifest` export.
- Import icons by name so unused icons are tree-shaken, such as `import { ArrowRight } from "vadivam-react"`.
- Add aria-hidden="true" to decorative icons, and give icons that carry meaning an accessible label.

Every docs page: https://vadivam.praveenjuge.com/llms.txt