Heroicons is the icon set from the makers of Tailwind CSS, and in a Tailwind project it's often the first one installed. It's small on purpose. Pikaicons is the library I draw, so read this with that in mind: it's paid, and it's for products that run past what a small set covers.
Here's the short answer:
- Pick Heroicons if your interface needs the common UI icons and little else, you want an MIT license, and you like that it's maintained alongside Tailwind.
- Pick Pikaicons if you keep finding that the icon you need isn't there, or you need duotone and contrast styles as well as outline and solid.
| Library | Icons | Styles | License or price |
|---|---|---|---|
| Heroicons | 316 | Outline, solid, mini, micro | MIT |
| Pikaicons | 5,000+ across 5 styles | Stroke, solid, duo stroke, duo solid, contrast | $99 once (Solo) |
Where Heroicons is the better choice
Heroicons has 316 icons, each drawn four ways: a 24px outline and solid, a 20px mini and a 16px micro. The smaller sizes aren't scaled down; they're redrawn for their grid, which keeps them sharp beside small text.
It's MIT licensed, so you can use it commercially, change it and ship it in open-source code or a template, keeping the license notice with it. And because it's from the Tailwind team, Tailwind UI and many Tailwind templates already use it, so the icons match what you've copied.
If your product is a dashboard with navigation, forms and settings, 316 well-drawn icons may be all you ever import.
Where Pikaicons is the better choice
A small set runs out at the edges of a product. Heroicons covers the interface itself, but not most of the subjects a product is about: payment methods, devices, medical, weather, sport, crypto or brand logos. Its latest release was on 18 Nov 2024, so a missing icon is likely to stay missing.
Pikaicons has 5,000+ icons across five styles in 27 categories, from essential UI to sets for AI, money and finance and developer tools. Every icon comes in stroke and solid like Heroicons, plus duo stroke, duo solid and contrast, all traced from the same outline.
It's one payment from $99 with every icon added later included, a Figma file for design, and the app or the pikaicons CLI for code.
The code, side by side
Heroicons imports each icon from a path that names its size and style, and you size it with classes:
import { HomeIcon } from "@heroicons/react/24/outline";
import { HomeIcon as HomeSolidIcon } from "@heroicons/react/24/solid";
<HomeIcon className="size-6 text-gray-500" />
The free Pikaicons on npm export each style under its own name, and Tailwind classes work the same way, because the icons draw in currentColor:
import { PikaIcon } from "@pikaicons/react";
import { HomeIcon, HomeSolidIcon } from "@pikaicons/core-free";
<PikaIcon icon={HomeIcon} className="size-6 text-gray-500" />
<PikaIcon icon={isActive ? HomeSolidIcon : HomeIcon} className="size-6" />
PikaIcon also takes a size prop (24 by default) and a strokeWidth (2), which Heroicons leaves to you. One difference to plan for: Heroicons' 24px outline uses a 1.5px stroke, and Pikaicons uses 2px, so swapped icons look slightly bolder unless you pass strokeWidth={1.5}.
The npm packages hold the 221 free icons, which are MIT licensed. On a paid plan, npx pikaicons add writes the icons you choose into your project as components, since paid icons never go into a public package.
Moving from Heroicons to Pikaicons
- Search your code for
@heroicons/reactto list the icons you use, and note which size each import comes from. - Find each one in the app or with
npx pikaicons search, by meaning rather than by name. - Decide on one stroke width for the whole product before you swap: keep 1.5 to match what you have, or move to 2.
- Replace the 24px icons first. Heroicons' 16 and 20px sets are redrawn for those sizes, so check those spots at the size you ship (icon sizes explains why 16px can look soft).
Frequently asked questions
Are Heroicons free for commercial use?
Yes. Heroicons is MIT licensed, which allows commercial use, changes and redistribution as long as the copyright and license notice stay with the icons. No credit is needed in your interface.
How many icons does Heroicons have?
316, each in a 24px outline and solid, a 20px mini and a 16px micro version.
Does Heroicons work without Tailwind?
Yes. The React and Vue packages render plain SVG, so any CSS can size and colour them. Tailwind's size-* and text-* classes are simply the shortest way to do it.
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.
