React

Live

UIX Icons for React

Install one npm package, import icons by name and ship only the ones you use.

Install

Add it and import an icon

The package needs React 17 or newer and nothing else.

Terminal

npm install @uixicons/react

Works the same with pnpm, yarn and bun.

React

import { Home, Bell } from '@uixicons/react/stroke-regular-rounded';

export function Nav() {
  return (
    <nav>
      <Home width={20} height={20} />
      <Bell style={{ color: '#6301E4' }} />
    </nav>
  );
}

The icon is named like the library name in PascalCase: home becomes Home, shopping-cart becomes ShoppingCart. A name that starts with a digit gets an underscore, like _3dPrinterLab.

Styles

One folder for each free style

Pick the style in the import path, and switching style is a one-word change.

Style	Import from	Look
Regular Rounded	@uixicons/react/stroke-regular-rounded	Round ends and corners
Regular Sharp	@uixicons/react/stroke-regular-sharp	Square ends and sharp corners
Solid	@uixicons/react/solid	Filled shapes

How it works

Small, typed and easy to style

Tree-shakable

Every icon is a named export and the package has no side effects, so unused icons stay out of your build.

Typed

Each module ships its own type file. An icon is a normal React component that accepts SVG props.

Follows your colour

Icons use currentColor. Set color in CSS or style and the icon follows the text around it.

Works on the server

Icons render as plain SVG, so server rendering and static export work without extra setup.

Free and Pro

What the package holds

Three styles are free

The package holds Regular Rounded, Regular Sharp and Solid under the MIT licence. Pro styles are not in the package. With a licence key you can copy any Pro icon as JSX from the icon browser.

See Pro

FAQ

Questions

Which React versions work?

React 17 and newer. The package lists React as a peer dependency and uses only createElement, so it works with Next.js, Vite, Remix and any other React setup. It renders plain SVG, so server rendering and static export work without extra steps.

Can I change the stroke width or colour?

Colour follows the CSS color of the parent, and size comes from the width and height props. Because each icon is plain SVG you can also pass className and style. For the stroke styles you can set the stroke width in CSS to make a line lighter or heavier.

Do I get Pro styles in the package?

No. The npm package holds the free styles only: Regular Rounded, Regular Sharp and Solid. Pro icons are copied from the icon browser as JSX with your licence key and pasted into your code, so the package stays small and fully MIT licensed.

Is there a Vue or Svelte package?

Not yet. Vue and Svelte packages are on the list. Today you can open any icon in the icon browser and copy it as a Vue or Svelte component, or use the plain SVG files, which work in any framework and any build tool.

Pick an icon and ship it today

Search the library, copy the code you need and drop it into your project.

Browse icons See all packages