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 { _React, _Vue, Nextjs } from "@dev.icons/react";

export default function Stack() {
  return (
    <div className="flex gap-4">
      <_React size={48} />
      <_Vue size={48} />
      <Nextjs size={48} alt="Next.js" />
    </div>
  );
}

Every icon file is a named export. The name is the file name split on - and PascalCased, so nextjs becomes Nextjs and nextjs-icon becomes NextjsIcon. The names React, Vue, Svelte, and Astro would clash with framework imports, so they get a _ prefix: _React, _Vue. Each icon page lists its exact component names.

3. Switch to monochrome

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

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

<div className="text-accent">
  <_React 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.