Best Free React Icon Libraries in 2026, Compared

For most React projects the answer is Lucide if you want a calm, consistent default, Tabler Icons if you want the biggest free set, and Phosphor if you need several weights of the same icon. Heroicons and Radix Icons are small, tidy sets that fit their own ecosystems, Iconoir is a strong Lucide alternative, and Meteocons is the one to grab for weather. All of them are free, MIT or ISC licensed, and ship as SVG components that tree-shake. Numbers below were checked on October 18, 2026 against each project's site and its npm package.

The comparison table

Library	Icons	Styles	License	React package	Import
Tabler Icons	6,238	Outline, filled	MIT	@tabler/icons-react	IconHeart
Lucide	1,891	Outline (stroke)	ISC	lucide-react	Heart or HeartIcon
Phosphor	1,512 per weight	6 weights	MIT	@phosphor-icons/react	HeartIcon + weight prop
Iconoir	1,671	Regular, solid	MIT	iconoir-react	Heart
Heroicons	316 per style	Outline, solid, mini, micro	MIT	@heroicons/react	HeartIcon from a size path
Radix Icons	318	One, on a 15×15 grid	MIT	@radix-ui/react-icons	HeartIcon
Meteocons	500+ (weather)	Fill, flat, line, monochrome	MIT	none (@meteocons/svg)	SVG file or Lottie JSON

Icon counts are what each site displays, except Phosphor and Radix, where we counted the components in the current npm release. Every React package in the table is published with "sideEffects": false and named exports, so a modern bundler only ships the icons you import.

Tabler Icons: the biggest free set

Tabler Icons has 6,238 icons, roughly 5,200 outline and the rest filled, all on a 24px grid and MIT licensed. If you searched "tabler icons react" (or "tablers icons", which a lot of people type), the package is @tabler/icons-react and every component is prefixed with Icon: IconArrowLeft, IconBrandGithub, and IconHeartFilled for the solid variant.

The prop worth knowing is stroke, which defaults to 2 and changes line weight on outline icons. Dropping it to 1.5 makes the whole set look lighter without switching libraries. The size of the set is its strength and its risk: with six thousand icons, two people on one team will pick two different "settings" icons. Also note the brand-* icons draw other companies' marks, so the trademark rules from our SVG and logo guide apply. See Tabler Icons in the catalog.

Lucide: the boring correct default

Lucide shows 1,891 icons, all stroke-based, released under ISC (a permissive license equivalent in practice to MIT), and its docs include a migration path for projects coming from react-feather. The package is lucide-react, and each icon is exported three ways, so Camera, CameraIcon and LucideCamera all work. Pick one style per codebase.

Props are size, color, strokeWidth and absoluteStrokeWidth, the last one keeping lines the same thickness when you scale an icon up. Lucide ships new versions often, which is good for coverage and means the icon you need usually already exists. See Lucide in the catalog.

Phosphor: one icon, six weights

Phosphor is the set to use when the same glyph has to work in a dense toolbar and on a bold marketing page. The React package @phosphor-icons/react contains 1,512 icons, each in six weights: thin, light, regular, bold, fill and duotone. You switch with a prop, weight="fill", which also makes it easy to toggle states like an empty and a filled star.

Two practical notes from its README. It exports more than 9,000 modules, so in Next.js add it to optimizePackageImports to keep dev builds fast. And in React Server Components, import from @phosphor-icons/react/ssr, because the default entry uses React Context for its IconContext defaults. See Phosphor Icons in the catalog.

Iconoir: a Lucide alternative with a solid set

Iconoir lists 1,671 icons under MIT, with a regular stroke style and a smaller solid style. In React, install iconoir-react and import by PascalCase name; the solid versions live at iconoir-react/solid. An IconoirProvider sets default color, size and stroke for everything below it. Choose it over Lucide if you prefer its drawing style or need filled versions of common icons.

Heroicons: small, sharp, Tailwind-flavored

Heroicons comes from the makers of Tailwind CSS: 316 icons, each drawn four ways. The import path picks the style: @heroicons/react/24/outline, 24/solid, 20/solid (mini) and 16/solid (micro). The dedicated 20px and 16px versions are what you want inside buttons, badges and form fields. The catch is breadth. 316 icons runs out fast in a real app, and the project says it is not accepting new icon contributions. The latest @heroicons/react release is from November 2024.

Radix Icons: tiny UI glyphs on a 15px grid

Radix Icons are a crisp set designed on a 15×15 grid, MIT licensed, installed as @radix-ui/react-icons. The current release exports 318 components, all suffixed with Icon. They are built for compact interface chrome: alignment, borders, typography, toolbar actions. The odd grid size means they look best at 15px and its multiples, and the package has not had a release since November 2024, so treat it as finished rather than growing.

Meteocons: animated weather icons

Meteocons is a weather-only set that has grown well past its early versions: the site now lists 500+ animated icons in four styles (fill, flat, line and monochrome), as SVG and Lottie, MIT licensed. There is no React component package. You install @meteocons/svg for animated SVGs, @meteocons/svg-static for a version without SMIL animation, or @meteocons/lottie for Lottie JSON, and the files are also on a CDN.

In React, the simplest route is to render the animated SVG as an <img>, which keeps the animation intact and costs nothing at runtime. If you want the icon inline so CSS can reach it, take the static file and run it through the SVG to JSX converter. For anything that shows a forecast this is the set to use; outside weather it has nothing for you. You can preview it on the icons page. See Meteocons in the catalog.

What an import looks like

Every library above follows the same pattern: named import, render as a component, style with props or currentColor. Here is Tabler next to Phosphor and Heroicons:

import { IconBrandGithub, IconHeartFilled } from '@tabler/icons-react'
import { BellIcon } from '@phosphor-icons/react/ssr'
import { BeakerIcon } from '@heroicons/react/20/solid'
import type { ReactElement } from 'react'

export function Toolbar(): ReactElement {
  return (
    <div className="flex items-center gap-2 text-slate-600">
      <IconBrandGithub size={20} stroke={1.5} aria-hidden />
      <IconHeartFilled size={20} />
      <BellIcon size={20} weight="duotone" />
      <BeakerIcon className="size-5" />
    </div>
  )
}

Icons inherit currentColor, so a text color class on the parent colors all of them. Add aria-hidden to decorative icons and an aria-label to icon-only buttons.

Tree-shaking and bundle size

Named imports are what make tree-shaking work. import * as Icons can defeat it, depending on your bundler, and pulls thousands of modules into development builds even when production output is fine. If you use Next.js, lucide-react, @tabler/icons-react and the three Heroicons paths are already in the framework's default optimizePackageImports list. Phosphor is not, so add it yourself:

// next.config.js
module.exports = {
  experimental: { optimizePackageImports: ['@phosphor-icons/react'] },
}

How to pick

• You want a safe default. Lucide. Consistent, actively maintained, everywhere.
• You keep running out of icons. Tabler. Six thousand icons covers almost every product domain, including brand marks.
• You need weights or a filled toggle. Phosphor, for the weight prop.
• You are all-in on Tailwind and need few icons. Heroicons, for the hand-tuned 16 and 20px sizes.
• You are building dense app chrome on Radix. Radix Icons, at 15px.
• You show weather. Meteocons. Nothing else on this list draws a thunderstorm well.

Mixing two sets is fine if their stroke widths match. Mixing three almost always shows.

When you need a free SVG icon none of them have

Sometimes the icon you need is a one-off: a product mark, a niche symbol, something a designer drew. Our free SVG icon and logo resources post covers where to find single SVGs, the license traps, and how to clean the file. Once you have it, the SVG to JSX converter turns it into a typed React component with currentColor and a size prop, so it behaves like the library icons around it.

FAQ

What is the best icon library for React?

For most projects, Lucide. It is consistent, ISC licensed, tree-shakes, and has close to 1,900 icons. Pick Tabler if you need more coverage and Phosphor if you need multiple weights.

How do I use Tabler Icons in React?

Install @tabler/icons-react, then import components by name with the Icon prefix, for example import { IconHome } from '@tabler/icons-react'. Use size, color and stroke props; filled variants end in Filled.

Are Lucide, Tabler and Phosphor free for commercial use?

Yes. Tabler, Phosphor, Iconoir, Heroicons, Radix Icons and Meteocons are MIT licensed and Lucide is ISC, which all allow commercial use as long as the license notice stays with the code. Keeping the package in your dependencies handles that.

Is there a React package for Meteocons?

No. Install @meteocons/svg (or @meteocons/lottie) and use the files directly, as an <img> for animated icons or converted to JSX from the static set if you need them inline.

Do React icon libraries increase bundle size?

Only by the icons you import, as long as you use named imports. Wildcard imports and barrel files in your own code are the usual cause of bloat.

---

Meteocons is previewed live on the icons page alongside the other SVG sets we track, and the rest of the visual toolkit sits in the tools catalog.