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, 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.

6 Frameworks

React, Vue, Svelte, 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