@hubtoolify/icons-react v2.0.2

Free React icons. One component per icon.

4,309 original icons in the Line style. Import the ones you use, style them with props, ship clean inline SVG.

npm install @hubtoolify/icons-react

pnpm add @hubtoolify/icons-react

yarn add @hubtoolify/icons-react

bun add @hubtoolify/icons-react

Try the playground Browse all icons

Icons: 4,309
Per icon: ~0.4 KBgzip
Styles: 3free
React: 18+TS types

Nav.jsx

import { HtiHome, HtiCalendarCheck } from '@hubtoolify/icons-react';

export function Nav() {
  return (
    <>
      <HtiHome />
      <HtiHome size={32} color="#2463ed" />
      <HtiCalendarCheck color="#f59e0b" strokeWidth={1.6} />
    </>
  );
}

Renders

Playground

Every prop, live

Change a prop and see what the component renders, with the exact JSX to copy.

Icon

size 48 strokeWidth 1.2

color

secondaryColor · secondaryOpacity

Component names

`Hti` + the name in PascalCase

arrow-up-right is <HtiArrowUpRight />. Click any icon to copy its component.

4,261 more in the icon library, each with its React snippet.

Built in

Small, accessible, safe to repeat

~411 B

Only what you import

One module per icon and sideEffects: false. A typical icon was about 411 bytes gzipped in 1.2.0, with three styles in each module, plus a 1.2 KB shared runtime.

import { HtiHome } from '@hubtoolify/icons-react';
// or the one module, directly:
import { HtiHome } from '@hubtoolify/icons-react/icons/home';

aria

Decorative by default

Icons render aria-hidden and are not focusable. Pass title or aria-label and an icon becomes role="img".

<button type="button" aria-label="Home">
  <HtiHome />
</button>

<HtiHome title="Home" />  {/* role="img" + <title> */}

useId

Safe to repeat

Each instance gets its own mask ids, so one icon can appear any number of times on a page. TypeScript types are included.

{items.map((item) => (
  <li key={item.id}>
    <HtiCalendarCheck />
    {item.name}
  </li>
))}

API

Props

Any other SVG attribute (onClick, style, data-*, aria-*) is passed to the <svg>, and a ref reaches it.

variant 'line', the free style (Solid and Duotone are in @hubtoolify-pro/icons-react since 2.0.0) default 'line'

size Width and height, in px or any CSS length default 24

color Icon colour; by default the text colour around it default currentColor

strokeWidth Stroke on the 24 px grid default 1.2

title Accessible name, rendered as an SVG <title> —

className Any CSS class —

Free and Pro

Line free. 14 more with Pro.

Free

`@hubtoolify/icons-react`

On npmjs.com. No account needed.

4,309 icons in the Line style
Personal, commercial and open-source projects
No attribution required

View on npm

Pro

`@hubtoolify-pro/icons-react`

From HubToolify's own registry, with your Pro account. Same component names, one subpath per style.

Solid
Duotone
Sharp Line
Sharp Solid
Sharp Duotone
Imprint
Pixel
Slab
Mellow
Jass
Draw
Lineal
Duo
Flat

npx @hubtoolify/icons login
npm install @hubtoolify-pro/icons-react

import { HtiHome } from '@hubtoolify-pro/icons-react/slab';

Icons already in your projects keep working if your plan ends. Use the free package in public repositories.

See Pro plans

Not using React?

The same icons, everywhere else

Free icon CDNLink from jsDelivr, nothing to install CSS classes@hubtoolify/icons: <i class="hti hti-home"> SVG files and modules@hubtoolify/icons-svg, with sprites and icons.json FigmaThe library inside your design files WordPressIcon, sticker and illustration blocks Animated iconsDraw on, pop in, wiggle: SVG and Lottie

Questions

Frequently asked

Are these React icons free for commercial projects?

Yes. @hubtoolify/icons-react (the Line style from version 2.0.0) is free for personal and commercial use, with no attribution required. Versions 1.x, which also held Solid and Duotone, stay under the free licence they were published with. You may not resell the icons as an icon set. The full terms are in the package's LICENSE.md and on the licences page.

Do unused icons end up in my bundle?

No. Every icon is its own module and the package is marked sideEffects: false, so Vite, webpack, Rollup and other bundlers keep only the icons you import, whether you import from the package root or from @hubtoolify/icons-react/icons/<name>.

Which React version do I need?

React 18 or later. The components use useId to give each instance its own mask ids, so the same icon can appear any number of times on a page. TypeScript types are included.

Are the icons accessible?

Icons are decorative by default (aria-hidden and not focusable). Give one a title, an aria-label or aria-labelledby and it becomes role="img" with that name. For an icon-only button, label the button and leave the icon decorative.

How do I find an icon's component name?

It is Hti plus the icon name in PascalCase: arrow-up-right becomes HtiArrowUpRight. Search the library at hubtoolify.com/icons, or read esm/names.json in the package.

Can I use the Pro styles in React?

Yes, with HubToolify Pro. @hubtoolify-pro/icons-react has 14 more styles (Solid, Duotone, Sharp Line, Sharp Solid, Sharp Duotone, Imprint, Pixel, Slab, Mellow, Jass, Draw, Lineal, Duo and Flat), one subpath per style; 3D is a rendered PNG, so it comes from the website and the Pro kit instead. It installs from HubToolify's own registry after npx @hubtoolify/icons login. If your plan ends, only the registry stops: icons already in your projects keep working and are never checked at runtime.

I would rather use CSS classes or plain SVG.

@hubtoolify/icons gives CSS classes (<i class="hti hti-home">), @hubtoolify/icons-svg gives every icon as an SVG file, a JavaScript module, sprites and icons.json, and the free icons are also on the jsDelivr CDN with nothing to install.

The icons are HubToolify's original artwork. Licence terms: licences.