Duo Icons is a modern duotone icon collection built for Svelte 5 projects. Each icon is a lightweight Svelte component with two layers (primary and secondary), providing a stylish two‑tone look that integrates seamlessly with your app.

Installation

Install the package via npm or yarn:

npm install @duo-icons/svelte
# or
yarn add @duo-icons/svelte

Peer Dependencies

• svelte ^5.53.7

Basic Usage

Import icons from the library and use them like any other component:

<script lang="ts">
  import { AddCircle } from '@duo-icons/svelte';
</script>

<main>
  <AddCircle />
  <AddCircle size="32" />
  <AddCircle class="text-red-500" />
</main>

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 icons extend native SVG attributes and accept an extra size prop:

| Prop | Type | Default | Description | |-----------|----------------------|---------|-------------| | size | number \| string | 24 | Width/height of the icon (px, rem, etc.) | | class | string | — | CSS classes applied to the SVG container | | ...svg attrs | various | — | Any standard SVG attribute (e.g. fill, stroke, aria-*) |

Duotone Layers

The component markup exposes two CSS classes on the <path> elements:

• .duo-icons-primary-layer – the main layer
• .duo-icons-secondary-layer – the secondary (faded) layer

Customize its appearance with Tailwind utility classes provided by @duo-icons/tailwind or standard CSS.

<AddCircle class="duo-icons-primary:text-blue-600" />
<style>
  .duo-icons-secondary-layer {
    opacity: 0.4;
    fill: #93c5fd;
  }
</style>

Styling Examples

Changing Size

<AddCircle size="16" />
<AddCircle size="1.5rem" />
<AddCircle size="48" />

Applying Colors

<AddCircle class="text-green-500" />
<AddCircle style="color: #e53e3e" />

Accessibility

<AddCircle aria-label="Add item" />

Practical Examples

Icon Button

<button class="p-2 rounded bg-blue-500 text-white flex items-center">
  <AddCircle class="mr-2" />
  Add
</button>

List with Icons

<ul>
  <li><AddCircle class="inline-block align-middle mr-1" /> New file</li>
</ul>

Color & Size Variation

<div class="flex gap-4">
  <AddCircle size="20" class="text-red-500" />
  <AddCircle size="24" class="text-yellow-500" />
  <AddCircle size="28" class="text-green-500" />
</div>

Additional Notes

• Since icons are just SVGs wrapped in Svelte components, you can animate them using Svelte transitions or CSS.
• You can import and render icons dynamically using import() if needed.

License

MIT © fazdiu

Support

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