@aircall/react-icons

Aircall Design icons distributed as SVG React components.

This package provides a modern, lightweight alternative to @aircall/icons without dependencies on styled-components or @xstyled.

Installation

pnpm add @aircall/react-icons

Usage

import { PlayFilled, PauseFilled } from '@aircall/react-icons';

// Basic usage
<PlayFilled />

// With size prop (sets both width and height)
<PlayFilled size={32} />
<PlayFilled size="2rem" />

// With individual dimensions
<PlayFilled width={24} height={24} />

// With color (inherits from CSS color)
<PlayFilled style={{ color: 'red' }} />
<PlayFilled className="text-primary" />

// With ref
const iconRef = useRef<SVGSVGElement>(null);
<PlayFilled ref={iconRef} />

// With other SVG props
<PlayFilled aria-label="Play" role="img" />

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | size | number \| string | '24px' | Sets both width and height | | width | number \| string | '24px' | Width of the icon (overridden by size) | | height | number \| string | '24px' | Height of the icon (overridden by size) | | ref | Ref<SVGSVGElement> | - | React ref forwarded to the SVG element | | ...props | SVGProps<SVGSVGElement> | - | Any valid SVG props |

Migration from @aircall/icons

Replace imports from @aircall/icons with @aircall/react-icons:

- import { PlayFilled } from '@aircall/icons';
+ import { PlayFilled } from '@aircall/react-icons';

The API is similar but without styled-components styling props. Use the size prop or standard CSS for styling.

Development

Generate icons from SVGs:

pnpm --filter=@aircall/react-icons run generate:icons

Build the package:

pnpm --filter=@aircall/react-icons run build:package

Icon Source

Icons are sourced from the Figma design file: Icons v2

SVG files should be placed in src/svgs/ directory and follow the naming convention:

• Use PascalCase with hyphens (e.g., Play-Filled.svg, Chevron-Down-Outlined.svg)
• SVGR will convert these to component names (e.g., PlayFilled, ChevronDownOutlined)

Why this package?

This package was created to provide a modern, lightweight alternative to @aircall/icons that:

1. No CSS-in-JS dependencies - Removes the requirement for styled-components and @xstyled
2. Smaller bundle size - Icons are pure SVG components with minimal wrapper code
3. Better tree-shaking - Each icon is a separate file that can be individually imported
4. Modern React patterns - Uses React.forwardRef for proper ref forwarding
5. TypeScript support - Full TypeScript definitions for props and component types