React

Use free, open-source Vadivam SVG icon components in React with tree-shakeable imports, shared defaults, and accessible labeling.

vadivam-react supports React 18 and newer and renders native <svg> elements.

npm install vadivam-react

Basic usage

import { Activity } from "vadivam-react";

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

Icons accept React SVG props plus size, color, strokeWidth, absoluteStrokeWidth, and title. Components forward a ref to the root SVGSVGElement and may contain children.

import { useRef } from "react";
import { Activity } from "vadivam-react";

export function FocusableIcon() {
  const ref = useRef<SVGSVGElement>(null);
  return <Activity ref={ref} tabIndex={-1} title="Activity" />;
}

Shared defaults

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

export function Toolbar() {
  return (
    <VadivamProvider size={20} color="navy" strokeWidth={1.5}>
      <Activity />
      <Search color="tomato" />
    </VadivamProvider>
  );
}

The provider accepts size, color, strokeWidth, absoluteStrokeWidth, and className. An icon’s own props override provider values.

Solid icons

Every icon has a solid twin with the same name in vadivam-react/solid. Use it for a selected or active state, or for a whole filled UI.

import { House } from "vadivam-react";
import { House as HouseSolid } from "vadivam-react/solid";

export function HomeTab({ active }: { active: boolean }) {
  const Icon = active ? HouseSolid : House;
  return <Icon size={20} aria-label="Home" />;
}

Solid icons take size, color, and title, and color sets the fill. They have no stroke, so strokeWidth and absoluteStrokeWidth are not props. VadivamProvider sets defaults for both styles. The solid entry has the same layout as the root, apart from the short per-icon path: vadivam-react/solid/icons/house, vadivam-react/solid/dynamic, and vadivam-react/solid/dynamicIconImports.

Per-icon imports

import Activity from "vadivam-react/activity";
// Also supported:
import Search from "vadivam-react/icons/search";

The root package also exports the generic Icon, createIcon/createVadivamIcon, icon nodes, and related TypeScript types for advanced custom-icon use.

Named icons render their generated icon data directly. That data is checked when the package is built, so importing icons does not add the runtime sanitizer to your bundle, and their props reach the <svg> as they would on any React SVG element. Icon and createIcon take icon data from outside the package, so they still sanitize icon nodes, root props, and color on every render. DynamicIcon loads the same built-in icons, but its props often come from runtime data, so it still sanitizes root props and color, including a color inherited from VadivamProvider. See Custom icon data.

Runtime names

import { DynamicIcon } from "vadivam-react/dynamic";

<DynamicIcon name="activity" size={20} fallback={null} />;

DynamicIcon loads the per-icon module and accepts the normal icon props plus name and an optional fallback. See Dynamic icons and accessibility guidance.

Frequently asked questions