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"
    />
  );
}
3

Or in Vue

App.jsx
jsx
<script setup lang="ts">
import { AlignBottom } from '@duo-icons/vue';
</script>

<template>
  <AlignBottom :size="32" color="#6366f1" />
</template>
4

Or in Tailwind CSS

main.css
css
/* in main.css */
@import '@duo-icons/tailwind/base'; /* <── Base styles */
@import '@duo-icons/tailwind/icons'; /* <── Import all icons via CSS (recommended)*/
tailwind.config.js
js
// or in tailwind.config.js
import duoicons from '@duo-icons/tailwind';
export default { plugins: [duoicons()] };
index.html
xml
<span class="duo-icons-airplay text-3xl text-indigo-500"></span>
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 Can I request new designs for the DuoIcons duotone icons collection?
Absolutely! We are constantly expanding our library of free duotone icons in SVG. If you need a specific symbol that isn't currently in our duotone icons set, you can submit a request through our Community Form. We prioritize the most requested icons to ensure DuoIcons remains the go-to resource for high-quality, customizable duotone icons for modern UI projects.
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