@esds-sangam/icons

Lightweight React icon library for the ESDS Sangam Design System. All icons are SVG-based, accessible, and designed to match the Sangam UI components.

Install

npm install @esds-sangam/icons

Usage

In a typical Sangam setup, you’ll also have the Sangam styles wired in your app entry:

import "@esds-sangam/styles/globals.css";
import "@esds-sangam/styles/theme.css"; // base light theme
import "@esds-sangam/styles/dark.css"; // optional dark theme support
import "@esds-sangam/styles/tailwind.css"; // Sangam Tailwind layer

Then you can use icons alongside your components:

import { Add, Close, InfoFilled } from "@esds-sangam/icons";

export function Example() {
  return (
    <div className="flex items-center gap-3">
      <Add aria-hidden className="h-4 w-4 text-primary-600" />
      <InfoFilled aria-label="Information" className="h-4 w-4 text-neutral-600" />
      <Close aria-label="Close" className="h-4 w-4 text-neutral-500 hover:text-neutral-900" />
    </div>
  );
}