@edux-design/icons

SVG icon set for the Edux design system. Every icon is a small React component that accepts standard SVG props (className, width, height, etc.) and inherits currentColor so you can tint it with CSS/Tailwind utilities.

Exports include Chevron, Close, Searchglass, Users, Warning, and dozens more – see src/index.ts for the full list.

Installation

pnpm add @edux-design/icons
# or
npm install @edux-design/icons

Peer deps: react@^19.1.0.

Usage

import { Close, Searchglass } from "@edux-design/icons";

export function SearchButton() {
  return (
    <button className="inline-flex items-center gap-2 text-fg-primary-emphasis">
      <Searchglass className="h-4 w-4" />
      Search
      <Close aria-hidden className="ml-2 h-3 w-3 opacity-60" />
    </button>
  );
}

Icons default to 24px and fill="currentColor". Override via props when you need custom sizing.

Adding/Updating Icons

1. Drop the SVG into src/components/YourIcon.tsx. Follow the existing pattern (functional component returning an <svg>).
2. Export it from src/index.ts.
3. Run pnpm --filter @edux-design/icons lint && pnpm --filter @edux-design/icons build.
4. Bump the package version + changelog if publishing.

Scripts

pnpm --filter @edux-design/icons lint
pnpm --filter @edux-design/icons build
pnpm --filter @edux-design/icons check-types

Because the icons are plain components, they tree-shake automatically—import only what you need to keep bundles small.