Neat Icons for React.
Every icon as a React component, in Rounded and Sharp, Line and Solid. Typed, tree-shakable, about 1.6 KB per icon you use. The 200 free icons install from npm; Personal and Team unlock all 1,104 with the same package name.
View on npmInstall
Free icons
The free edition (200 icons) is on npm. React 18 or newer.
npm i @neaticons/react
The full set
Activate a seat at neaticons.com/activate, then add these two lines to .npmrc in your project and install. Had the free edition before? Uninstall it and install again. Your imports stay the same.
@neaticons:registry=https://npm.neaticons.com/ //npm.neaticons.com/:_authToken=YOUR_SEAT_KEY
npm i @neaticons/react
Use
import { Home, Search } from "@neaticons/react" // Rounded Line
import { Home as HomeSolid } from "@neaticons/react/rounded-solid"
import { Wallet } from "@neaticons/react/sharp-stroke"
import Bell from "@neaticons/react/sharp-solid/notification" // one icon, one file
<Home />
<Search size={20} color="#0A84FF" title="Search" />
<Wallet strokeWidth={2} className="icon" />Imports
The main entry is Rounded Line. Each style has its own path: /rounded-solid, /sharp-stroke and /sharp-solid. One file per icon works too, like /sharp-solid/notification. Names are the icon name in PascalCase, and each one also exports an ...Icon alias, so Home and HomeIcon are the same.
Props
size (default 24), color (default currentColor), strokeWidth for the Line styles (default 1.5), title for an accessible name (without it the icon is decorative and hidden from screen readers), plus any SVG prop and a ref.
Small bundles
The package is ES modules with sideEffects: false, so your bundler keeps only the icons you import. One icon adds about 1.6 KB.
Solid cut-outs
The details cut out of the Solid styles are real SVG masks, so they stay see-through on any background, light or dark. @neaticons/react/meta.json lists every icon with its category.
Every icon page shows the exact import, for example home, cart or calendar hijri. Current package version: 1.1.0.