React

One tree-shakeable React component per icon, with TypeScript types.

as Markdown, for notes or an AI chat

@hubtoolify/icons-react has a component for every free icon. Each is its own module, so your bundle keeps only the icons you import. TypeScript types are included, and it works with React 16.8 or later, Next.js, Remix, Vite and Create React App.

From version 2.0.0 the free package has Line only. Solid and Duotone moved to @hubtoolify-pro/icons-react with the other Pro styles, so the Solid and Duotone examples on this page need Pro. Versions 1.x (up to 1.2.1) included Solid and Duotone under the free licence, and copies you already installed keep that licence.

Install#

Terminal

npm install @hubtoolify/icons-react

No npm? Download the package as a ZIP and install it from the folder.

Use#

Components are named Hti plus the icon's name in PascalCase: arrow-up-right becomes HtiArrowUpRight.

JSX

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

export function Toolbar() {
  return (
    <>
      <HtiHome />
      <HtiHome variant="solid" size={32} color="#1766f2" />
      <HtiCalendarCheck variant="duotone" secondaryColor="#ffd23f" secondaryOpacity={0.9} />
      <HtiHome strokeWidth={2} title="Home" />
    </>
  );
}

Props#

Prop	Value
`variant`	`'line'` (default). `'solid'` and `'duotone'` were in 1.x; from 2.0.0 they are in the Pro package
`size`	Width and height, default 24
`color`	Defaults to `currentColor`, so the icon follows the text
`secondaryColor`, `secondaryOpacity`	The Duotone tone
`strokeWidth`	On the 24 px grid; default 1.2 for Line (1.7 for Solid and Duotone, in 1.x and Pro)
`title`	An accessible name. Without it the icon is `aria-hidden`

Any other prop (className, style, onClick…) goes to the <svg>. Every instance gets its own mask ids, so the same icon can appear any number of times on a page.

Icon-only buttons#

Label the button, not the icon:

JSX

import { HtiSearch } from '@hubtoolify/icons-react';

<button type="button" aria-label="Search">
  <HtiSearch size={20} />
</button>

Icons from data#

Keep the components themselves in your data rather than strings, so the bundler can still drop the icons you do not use:

JSX

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

const NAV = [
  { href: '/', label: 'Home', Icon: HtiHome },
  { href: '/account', label: 'Account', Icon: HtiUser },
  { href: '/settings', label: 'Settings', Icon: HtiSettings },
];

export function Nav() {
  return NAV.map(({ href, label, Icon }) => (
    <a key={href} href={href}><Icon size={18} /> {label}</a>
  ));
}

Pro styles#

The Pro styles come as @hubtoolify-pro/icons-react, one subpath per style, from HubToolify's registry. See Pro packages. There is more on the React icons page.