Open Source · MIT License · Free Forever

Duotone Icons for
the Modern Web

90+ free, open-source two-tone SVG icons with native support for React, Vue, Svelte, Flutter, Tailwind CSS and more. Tree-shakeable · TypeScript · MIT licensed.

Browse Icons Star on GitHub
Install Vanilla
bash
npm install duo-icons
Color
Size
px

Everything you need

DuoIcons is built for developers who care about quality, performance and developer experience.

🌳

Tree-shakeable

Import only what you use. Zero dead code in your bundle.

⚡

TypeScript Native

Full type safety with auto-complete in VS Code and all modern editors.

✦

Optimised SVGs

Every path is hand-crafted and SVGO-optimised. Crisp at any resolution.

🧩

9 Frameworks

React, Vue, Svelte, Flutter, Tailwind, Alpine, Vanilla JS, React Native and pure SVG.

🎨

Fully Customisable

Control primary and secondary layer colors independently. Any size, any weight.

⚖️

MIT License

Free forever for personal and commercial projects. No attribution needed.

Quick Start Guide

From zero to icons in under a minute.

1

Install the package

bash
npm install @duo-icons/react
2

Import and use

App.tsx
tsx
import { AlignBottom } from '@duo-icons/react';

export default function App() {
  return (
    <AlignBottom
      size={32}
      color="#6366f1"
    />
  );
}
Read the full documentation

Frequently Asked Questions

Everything you need to know about DuoIcons.

Q What are DuoIcons?
DuoIcons is a free, open-source collection of duotone (two-tone) SVG icons designed for modern web and mobile applications. Each icon has two layers — a primary and a secondary — giving them depth and personality.
Q Are DuoIcons free to use?
Yes. DuoIcons is 100% free and released under the MIT License. You can use them in personal and commercial projects without any attribution required.
Q Which frameworks are supported?
DuoIcons has native packages for React, Vue 3, Svelte, Tailwind CSS, Alpine.js, Vanilla JS, React Native and Flutter. Every package is tree-shakeable and ships TypeScript types.
Q How do I install DuoIcons for React?
Run `npm install @duo-icons/react` in your project. Then import the icon you need: `import { AlignBottom } from '@duo-icons/react'` and use it as a component.
Q Can I customize the icon colors and sizes?
Absolutely. Every icon inherits its color from the CSS `color` property via `currentColor`. You can also pass explicit `color` and `size` props in framework packages, or use CSS variables to theme both layers independently.
Q How do I contribute or request new icons?
Open an issue or pull request on our GitHub repository. You can also click the '+' button on this page to suggest a specific icon. Priority requests can be fast-tracked via a small Ko-fi donation.
Q What is the difference between SVG and Symbol SVG?
A regular SVG is a standalone file you can embed directly. A Symbol SVG wraps the icon in a `` element for use in an SVG sprite sheet, which is ideal for performance-critical applications that reuse the same icon many times.

☕

DuoIcons is free — help keep it that way

Maintaining an open-source icon library takes time and effort. If DuoIcons saves you time, consider buying us a coffee.

☕ Support on Ko-fi ⭐ Star on GitHub