Duo Icons provides a set of modern, duotone SVG icons packaged as React Native components. Each icon comprises two layers (primary/secondary) to achieve a stylish two‑tone look that works seamlessly on iOS, Android and web (via react-native-web).

Installation

Install the library using npm or yarn:

npm install @duo-icons/react-native
# or
yarn add @duo-icons/react-native

Peer Dependencies

Make sure your project already includes:

• react
• react-native
• react-native-svg

Install them if missing:

npm install react react-native react-native-svg

Basic Usage

Import icons from the package and render them like any other React component:

import { AddCircle } from '@duo-icons/react-native';

export default function App() {
  return (
    <AddCircle />
    <AddCircle size={32} color="red" />
  );
}

The default size is 24 (pixels) and the icon inherits the color prop for the SVG fill.

Available Icons

The complete collection of all available icons is at https://duoicons.vercel.app/, providing the necessary resources to implement them into your project.

Props & Options

All icon components accept the following props (extending react-native-svg's SvgProps):

| Prop | Type | Default | Description | |----------|--------------|---------|-------------| | size | number | 24 | Width/height in pixels | | color | string | black | Fill color applied to both layers | | ...rest | SvgProps | — | Any other SVG attribute supported by react-native-svg (e.g., strokeWidth, aria-label) |

Styling

React Native styling works as usual. You can combine icons with <View> or <Text> and control layout using UIKit-style styles.

<AddCircle style={{ margin: 8 }} color="#3b82f6" />

Practical Examples

Color & Size Variations

<View style={{ flexDirection: 'row', gap: 12 }}>
  <AddCircle size={16} color="#e53e3e" />
  <AddCircle size={24} color="#34a853" />
  <AddCircle size={32} color="#1a73e8" />
</View>

Icon Button

import { TouchableOpacity, Text, View } from 'react-native';

<TouchableOpacity style={{ flexDirection: 'row', alignItems: 'center', padding: 8, backgroundColor: '#3b82f6' }}>
  <AddCircle size={20} color="white" />
  <Text style={{ color: 'white', marginLeft: 4 }}>Add</Text>
</TouchableOpacity>

Accessibility

<AddCircle
  size={24}
  color="black"
  accessibilityLabel="Add item"
/>

Additional Notes

• Works on both native and web via react-native-web.
• You can render icons dynamically using import() if building a large directory.
• Icons are pure functional components with no dependencies other than react-native-svg.

License

MIT © fazdiu

Support

If you find Duo Icons useful, consider supporting the project with a donation: