@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:
- No CSS-in-JS dependencies - Removes the requirement for
styled-componentsand@xstyled - Smaller bundle size - Icons are pure SVG components with minimal wrapper code
- Better tree-shaking - Each icon is a separate file that can be individually imported
- Modern React patterns - Uses
React.forwardReffor proper ref forwarding - TypeScript support - Full TypeScript definitions for props and component types