Duo Icons - React
Duo Icons for React delivers a lightweight, duotone SVG icon set implemented as React components. Ideal for modern web applications, each icon comes with two layers (primary and secondary) for a stylish two‑tone effect.
Installation
Use npm or yarn to install:
npm install @duo-icons/react
# or
yarn add @duo-icons/react
Peer Dependencies
react
Ensure these are installed in your project.
Basic Usage
Import individual icons and use them in JSX:
import { AddCircle } from '@duo-icons/react';
function App() {
return (
<div>
<AddCircle />
<AddCircle size={32} className="text-red-500" />
</div>
);
}
Icons accept standard SVG props (fill, stroke, aria-*, etc.) and a size prop for convenience.
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
| Prop | Type | Default | Description |
|---|---|---|---|
size | number | 24 | Width/height in pixels |
className | string | — | CSS classes applied to the <svg> element |
| ...svg props | React.SVGProps | — | Any valid SVG attribute (e.g. fill, stroke, aria-label) |
Duotone Layers
Each icon markup includes:
.duo-icons-primary-layer– main/fill path.duo-icons-secondary-layer– secondary/faded path (opacity.3by default)
You can style these using CSS or utility frameworks.
Styling
Tailwind CSS Example
Customize your appearance with Tailwind's utilities; you can also customize the layers with the custom utilities duo-icons-primary and duo-icons-secondary provided by @duo-icons/tailwind/base.
<AddCircle className="text-blue-500" />
<AddCircle className="text-green-600 duo-icons-secondary:text-green-500" size={32} />
Plain CSS
.icon-large {
width: 48px;
height: 48px;
color: #1a73e8;
}
.icon-large .duo-icons-secondary-layer {
opacity: 0.4;
}
<AddCircle className="icon-large" />
Practical Examples
Size & Color Variations
<div className="flex gap-4">
<AddCircle size={16} className="text-red-500" />
<AddCircle size={24} className="text-yellow-500" />
<AddCircle size={32} className="text-green-500" />
</div>
Icon Button
<button className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white rounded">
<AddCircle size={20} />
Add Item
</button>
Accessibility
<AddCircle aria-label="Add item" />
Additional Notes
- Icons are pure functional components; tree‑shaken in modern bundlers.
- Import only the icons you need to reduce bundle size.
- You can load icons dynamically using
import().
License
MIT © fazdiu
Support
If you find Duo Icons useful, consider supporting the project with a donation: