@mellon-design/icons

React icon components for the Mellon design system.

Install

npm install @mellon-design/icons

Usage

import { PlayIcon, DownloadFolderIcon } from '@mellon-design/icons';

function Toolbar() {
  return (
    <div style={{ color: '#111827' }}>
      <PlayIcon />
      <DownloadFolderIcon size={20} color="#2563eb" />
    </div>
  );
}

Every icon is a forwardRef React component that accepts:

• size — width/height in px or any CSS unit (default 24)
• color — fill color (default currentColor, so icons inherit surrounding text color)
• any other native <svg> prop (className, onClick, aria-hidden, etc.)

Icons

| Component | Source | | --- | --- | | PlayIcon | svg/play.svg | | PauseIcon | svg/pause.svg | | StopIcon | svg/stop.svg | | RecordIcon | svg/record.svg | | DownloadIcon | svg/download.svg | | FolderIcon | svg/folder.svg | | DownloadFolderIcon | svg/download-folder.svg | | AudioWaveIcon | svg/audio_wave.svg | | AudioWaveTranscriptionIcon | svg/audio_wave_transcription.svg | | AiMagicIcon | svg/ai_magic.svg | | HeartIcon | svg/heart.svg | | HomeIcon | svg/home.svg | | LeftArrowIcon | svg/left-arrow.svg | | LocationPinIcon | svg/location_pin.svg | | MailIcon | svg/mail.svg | | RightArrowIcon | svg/right-arrow.svg | | SettingCogIcon | svg/setting_cog.svg |

Adding new icons

1. Drop the raw SVG (24x24, viewBox="0 0 24 24") into svg/.
2. Create a matching component in src/icons/ following the pattern of the existing icons (hardcoded fill="black" replaced with the color prop, defaulting to currentColor).
3. Export it from src/index.ts.
4. Run npm run build to verify it compiles.

Development

npm install
npm run build      # bundles ESM + CJS + .d.ts into dist/
npm run typecheck