react-native-system-icon

React Native icon components that mirror the React Vant design language. Every icon is implemented with react-native-svg, so you can use them in React Native or Expo projects without web dependencies.

Install

pnpm add react-native-system-icon

react-native-svg is automatically installed as a dependency. You don't need to install it separately.

Usage

Using Icons

import { Add, CartO } from 'react-native-system-icon';

export function Example() {
  return <Add size={32} color="#ff6034" />;
}

Using react-native-svg Components

You can also import react-native-svg components and types directly from this library:

import { Svg, Path, Rect, SvgCircle, type SvgProps } from 'react-native-system-icon';

export function CustomIcon() {
  return (
    <Svg width={100} height={100}>
      <SvgCircle cx={50} cy={50} r={40} fill="blue" />
      <Rect x={10} y={10} width={80} height={80} fill="red" />
    </Svg>
  );
}

Note: Circle and Stop from react-native-svg are exported as SvgCircle and SvgStop to avoid conflicts with icon components of the same name.

Props

All icons accept every SvgProps from react-native-svg, plus a size shortcut (defaults to 24). For multi-colored glyphs, pass custom fill props to the underlying Svg elements when needed.