Assumes you have a React, Vue, or Svelte project running. If not, start with Installation.

1. Install

npm install @dev.icons/react

2. Import and render

import { ReactIcon, VueIcon, SvelteIcon } from "@dev.icons/react";

export default function Stack() {
  return (
    <div className="flex gap-4">
      <ReactIcon size={48} />
      <VueIcon size={48} />
      <SvelteIcon size={48} />
    </div>
  );
}

Every icon is a named export. The component name is PascalCase + Icon, so next-js becomes NextJsIcon.

3. Switch to monochrome

Full-color icons are the default. Import from the /mono subpath to get single-color variants that inherit currentColor.

import { ReactIcon } from "@dev.icons/react/mono";

<div className="text-accent">
  <ReactIcon size={48} />
</div>

4. Make it interactive

Icons accept all SVG attributes: onClick, aria-label, role, etc.

import { GithubIcon } from "@dev.icons/react/mono";

<button
  type="button"
  aria-label="View on GitHub"
  className="text-text-muted hover:text-accent transition-colors"
>
  <GithubIcon size={24} />
</button>

That’s it

Browse the icon library for the full catalog, or read the React guide for props, tree-shaking, and SSR.