Pikaicons vs Lucide: which icon library should you use?

Lucide is the icon library most React projects already have, and for a lot of them it's the right one to keep: it's free, it's ISC licensed and it's actively maintained (its latest release was on 21 Oct 2026 when we checked). Pikaicons is the library I draw, so read this with that in mind. It's paid, and it exists for the teams that outgrow a single outline style.

Here's the short answer:

• Pick Lucide if one outline style covers your product, you want an open-source license, or you need an icon nobody else draws, since its community adds them quickly.
• Pick Pikaicons if you need filled, duotone or contrast versions of the same icons, a Figma file that matches the code, and you'd rather pay once than maintain the gaps yourself.

Where Lucide is the better choice

Lucide has 1,903 icons in one style, drawn with a 2px stroke on a 24px grid, and lucide-react is installed 67.1M times a week. That reach is its biggest advantage: shadcn/ui uses it by default, so most component examples you copy already import from it.

The ISC license lets you use, change and redistribute the icons, commercially too, as long as the license notice travels with them. You can put Lucide icons in an open-source repository, a template you sell or a package you publish, none of which a paid Pikaicons license allows.

If your product is mostly outline icons on white and you never need a selected state that fills in, Lucide gives you that for free and there's nothing to buy.

Where Pikaicons is the better choice

Lucide has one style. When a tab bar needs a filled icon for the selected tab, you either fake it with fill="currentColor" (which only works on closed shapes and fills the wrong parts of many icons) or bring in a second library whose corners and stroke don't match.

Pikaicons draws 5,000+ icons across five styles in 27 categories: stroke, solid, duo stroke, duo solid and contrast. Every style is traced from the same outline, so switching an icon from stroke to solid changes its weight without moving its silhouette.

Designers get the whole library as a Figma file, and developers copy any icon from the app as SVG, React, Vue, Svelte, React Native or Solid, or add it from the terminal with the pikaicons CLI. It's one payment from $99 with every later icon included, so the cost doesn't grow the way a subscription does.

The code, side by side

Lucide exports one component per icon, and its props set the size, colour and stroke width:

import { House, Search } from "lucide-react";

<House />
<Search size={16} strokeWidth={1.5} className="text-muted-foreground" />

The free Pikaicons on npm work the same way, except the icon is data passed to one PikaIcon component, and each style has its own export:

import { PikaIcon } from "@pikaicons/react";
import { HomeIcon, HomeSolidIcon, SearchIcon } from "@pikaicons/core-free";

<PikaIcon icon={HomeIcon} />
<PikaIcon icon={SearchIcon} size={16} strokeWidth={1.5} className="text-muted-foreground" />
<PikaIcon icon={isActive ? HomeSolidIcon : HomeIcon} />

The props carry over: size defaults to 24, color to currentColor and strokeWidth to 2 on both, and both pass className through to the <svg>. Only the icon you import ends up in your bundle with either one.

The npm packages hold the 221 free icons, which are MIT licensed. The paid icons never go into a public package, so on a paid plan npx pikaicons search finds an icon and npx pikaicons add writes it into your project as a component, which you import like any other file.

Moving from Lucide to Pikaicons

You don't have to switch everything at once, and you shouldn't mix the two in the same toolbar for long, because their corners differ even though both use a 2px stroke.

1. List the icons your product actually imports from lucide-react (a search for that string finds them all).
2. Find each one in Pikaicons by name or idea in the app or with npx pikaicons search. Names differ between libraries, so search by what the icon means rather than by its Lucide name.
3. Replace one screen at a time, starting with the navigation, where a style switch for selected states pays off first.
4. Remove lucide-react once nothing imports it.

SVG icons in React covers sizing, colour and accessible labels, which work the same way after the move.

Frequently asked questions

Are Lucide icons free for commercial use?

Yes. Lucide is ISC licensed, which allows commercial use, changes and redistribution as long as the copyright and license notice stay with the icons. You don't need to credit Lucide in your product's interface.

Does Lucide have filled icons?

No. Lucide draws one outline style. Setting fill="currentColor" fills some closed shapes, but icons with open strokes or inner details don't fill correctly. If you need filled or duotone versions, use a library that draws them, such as Phosphor (free) or Pikaicons (paid).

Is Pikaicons free?

221 Pikaicons are free under the MIT license, on the free icons page and on npm as @pikaicons/core-free. The full library of 5,000+ icons is a one-time payment from $99, with every icon added later included.

Can I use Lucide and Pikaicons together?

You can, and it's a reasonable way to migrate. Keep each library to its own part of the product while you do, since two sets side by side show different corners and proportions even at the same size and stroke width.