Do the icons work with Next.js and Server Components?

Yes. Icons render plain SVG and work in both Server and Client Components with no configuration.

Are they tree-shakeable?

Yes. Every icon is its own export and the package is marked side-effect free, so only the icons you import end up in your bundle.

Do they work with Tailwind CSS?

Yes. Icons use currentColor, so text colour classes colour them, and className is passed to the SVG element.

Is there TypeScript support?

Yes. Every component and prop is typed, so your editor autocompletes icon names and options.

Free React icons

152 typed React icon components in outline, solid, duotone and two-tone, rounded or sharp. Tree-shakeable, MIT licensed, works with Next.js.

Install

npm i @uv-foundry/icons-react

Also works with pnpm, yarn and bun.

Use

import { HomeIcon, BellOffIcon } from '@uv-foundry/icons-react';

export function Nav() {
  return (
    <>
      <HomeIcon />
      <HomeIcon variant="solid" corner="sharp" size={16} />
      <BellOffIcon variant="duotone" className="text-red-600" />
      <HomeIcon title="Home" /> {/* accessible label */}
    </>
  );
}

Next.js

Works in Server and Client Components with no setup, since icons render plain SVG with no browser APIs. Requires React 18 or later.

Options

Prop	Values	Default
`variant`	stroke, solid, duotone, twotone	stroke
`corner`	rounded, sharp	rounded
`size`	pixels	24
`strokeWidth`	1 to 2	adapts to size: 2.25 at 16px, 1.8 at 20px, 1.5 at 24px
`color`	any CSS colour	currentColor
`title`	accessible label	none (hidden from screen readers)

All 152 icons

Click an icon for its component name, SVG code and every style. Using an AI coding tool? Connect the MCP server and it finds the right icon names for you.

Questions

Do the icons work with Next.js and Server Components?: Yes. Icons render plain SVG and work in both Server and Client Components with no configuration.
Are they tree-shakeable?: Yes. Every icon is its own export and the package is marked side-effect free, so only the icons you import end up in your bundle.
Do they work with Tailwind CSS?: Yes. Icons use currentColor, so text colour classes colour them, and className is passed to the SVG element.
Is there TypeScript support?: Yes. Every component and prop is typed, so your editor autocompletes icon names and options.