IconMind vs Heroicons

Heroicons is small on purpose. Every icon in it is one somebody needed while building Tailwind UI, which is why the set feels so coherent and why it has almost no filler. For a marketing site, a settings page or a checkout flow it is often complete.

The limit shows up the moment a product has a domain. There is no icon for a model, a token, an embedding, a retrieval step or a policy, so teams draw their own and the seams appear immediately: a hand-drawn agent beside a Heroicons user is obvious at 24 px.

IconMind is 2,287 icons and its interface families are deliberately close to what Heroicons covers, so the two overlap cleanly. The difference is the 664 icons behind them.

Heroicons ships four styles, and two of them are optical sizes rather than weights: mini at 20 px and micro at 16 px are solid-only and redrawn for those boxes, with the detail simplified rather than shrunk. In a dense table or a compact toolbar they are visibly better than scaling a 24 px icon down.

IconMind does not do this. Every icon is drawn once on a 24 px grid and validated to stay legible when rendered at 16, which is a weaker guarantee than a purpose-drawn 16 px cell. The audit measures ink coverage and short-side length precisely because of that, and icons that fail it get redrawn, but a rule is not the same as a separate drawing.

If your interface is mostly 16 and 20 px chrome, this is a real argument for Heroicons, and an honest one to make on a page like this.

Heroicons outline is 1.5 px on a 24 px grid. IconMind's thin weight is 1.5 px on a 24 px grid. Set the weight and the two sets sit together without anyone noticing the join.

Both take className, so Tailwind sizing and colour work identically. Neither needs a wrapper component, and neither ships CSS.

Heroicons publishes React and Vue packages, plus raw SVG that anyone can copy. That covers a large share of the Tailwind audience and nothing more is promised.

IconMind publishes nine framework packages from one source, along with a sprite sheet, an Iconify collection and an MCP server for coding assistants. If your stack is Svelte, Solid, Astro, Laravel or Flutter, this is the practical difference between the two.

Heroicons' solid style is the same shape with the interior filled, and at 20 and 16 px it is the right call: below a certain size a stroke drawing has more line than area and starts to shimmer. The mini and micro styles are solid for exactly that reason.

IconMind's second variant is duotone rather than solid. The strokes stay, and the body behind them takes a twenty percent tint of the same colour. The icon gains presence without giving up the interior detail, which matters here because the families are told apart by what is inside them: a ring with a check, a chamfered frame, a server with a status light.

Every duotone cell is derived from the outline drawing by rule, so there is no drift between the two and no icon that has one but not the other. All 2,287 exist in both, at all three weights, which is where the 13,722 figure comes from.

The usual pattern is not a migration. Heroicons keeps the chrome it already draws well, and IconMind fills the screens Heroicons was never going to cover: the model list, the agent run view, the retrieval trace, the eval report.

Two settings make the join invisible. Use the thin weight, which is 1.5 px like Heroicons outline, and keep both at the same rendered size. Both take className, both inherit currentColor, and neither ships any CSS of its own.

If you do want a full switch, start with the icons Heroicons has and IconMind also has, which is most of the interface set, then work through the rest by hand. There are around 300 icons to consider, so it is an afternoon rather than a project.

Neither set has a bundle-size problem in a modern build. Both publish per-icon modules with sideEffects false, so an app that imports twelve icons ships twelve icons and the rest never leaves node_modules.

The measurable difference is on disk during install. The Heroicons React package unpacks to 3.5 MB across 5,183 files; IconMind unpacks to 5.6 MB across 6,867 files for seven and a half times as many icons, because a cell is a small file and there is no per-icon runtime.

One IconMind import is 619 bytes gzipped including the shared factory, and three are 820, so each icon after the first costs about 100 bytes. The one thing to avoid on the client is the metadata module, which is 1.7 MB and meant for build scripts and the MCP server; use metadata.json at build time instead.

Heroicons sets aria-hidden on every icon and gives you a title and titleId pair. Pass both and the component renders a title element inside the SVG and wires aria-labelledby to it, which is the most explicit way to name an icon and one of the nicer details in that package.

IconMind takes the shorter route. Icons are aria-hidden with focusable false by default, and passing aria-label or aria-labelledby switches the element to role img so it is announced. There is no title prop, which is a real difference if your team standardised on that pattern.

Either way the guidance is the same: name the control rather than the icon, and reserve a label for the case where the icon is the only content in the button.

Heroicons stays small by declining almost everything, which is why it works. Requests for domain icons are usually answered by pointing at other sets, and that is the correct answer for a set with that scope.

IconMind declines a different list: brand logos, cryptocurrency, weather, food, animals, a filled variant, an icon font. It also refuses drawings its own compiler cannot make correctly, and those refusals are published with their reasons rather than quietly dropped.

Heroicons exists to dress the components Tailwind ships. Its scope is deliberately the smallest set that does that job, and it is maintained by people whose main work is elsewhere. That is a strength: nothing in it is filler, and it changes slowly.

IconMind exists for a domain that did not have a vocabulary. Two thirds of it is ordinary interface work because those screens still need arrows and folders, and the remaining 664 icons are the reason the set exists at all.

Package sizes were taken from the npm registry on 31 August 2026, from the published tarballs rather than a badge: @heroicons/react 2.2.0 unpacks to 3.5 MB across 5,183 files, @iconmind/react 0.6.0 to 5.6 MB across 6,867 files. Both are disk in node_modules, not bytes in a browser.

The styles and defaults described here were read from the packages themselves. The Heroicons outline components render at a 1.5 px stroke with currentColor and aria-hidden set, which is where the claim that the thin weight matches them comes from.

The IconMind figures are the set: 2,287 icons, 13,722 cells, 664 of them in the AI, agent, MCP and RAG families, and 619 bytes gzipped for the first icon you import, measured by the size-limit suite that runs in CI.