switching from Heroicons?

A free Heroicons alternative

Q: Do with icons work with Tailwind CSS like Heroicons?

Yes. Icons use currentColor and accept className, so size-6 and text-rose-500 work the same way.

Short answer

Looking for a Heroicons alternative? with icons is a free, MIT-licensed set of 500 icons in 20 styles: copy them as SVG or PNG, use <i class="with with-home"> tags, or install them from npm for React, Vue, Svelte, Angular and Solid. Heroicons is hand-crafted SVG icons from the makers of Tailwind CSS: a small, polished set of 316 icons in outline, solid, mini and micro sizes. Below: a side-by-side table, when to choose each, and a name map with a converter to switch.

Facts checked 1 October 2026

At a glance

Heroicons vs with icons

The facts that usually decide it, side by side. Small numbers link to the source.

Heroicons compared with with icons
Feature	Heroicons	with icons
Licence	MIT[2]	MIT, for the icons and the code
Price	Free[1]	Free. No paid tier, no account
Icons	316 (“316 icons”)[1]	500 icons × 20 styles (10,000 SVGs)
Styles	Outline (24 px, 1.5 stroke), Solid (24 px), Mini (20 px) and Micro (16 px)[1][2]	20 styles on one 24 × 24 grid: Line, Solid, Duo, Gloss, Engrave, Blueprint, Sketch, Glass, Kawaii, Sticker, Pixel, Retro, Luxe, Bauhaus, Skeuo, Anime, Gothic, Pastel, Coquette and Plush. Every icon can also move: 32 CSS animations and 12 swap transitions (@withicons/motion)
Frameworks	React (`@heroicons/react`) and Vue (`@heroicons/vue`); plain SVG for everything else[2]	React, Vue, Svelte, Angular, Solid and a `<with-icon>` web component, all on npm; plus SVG, PNG and sprites
CSS classes / icon font	No icon font or classes; copy the SVG or use the components[2]	Yes: `<i class="with with-home"></i>`, add `with-solid` etc. for other styles
Self-hosting	Yes: copy SVGs from the site or the repo, or use npm[2]	Yes: download SVGs, sprites and CSS (developers)
Design tools	Official Figma community file[3]	Copy SVG and paste into Figma, Canva, PowerPoint (guides)
AI / MCP	No official MCP server or llms.txt found	llms.txt an agent skill and an MCP server (`@withicons/mcp`)
Credit required?	No (keep the MIT notice when redistributing the code)[2]	No

Heroicons facts were checked on 1 October 2026 against the official sources numbered below. Prices and counts change, so follow the links for the latest. “None found” means we couldn’t find an official offering, not that none exists.

Which one?

Both are good. Here’s when each fits

Choose Heroicons if…

You build with Tailwind CSS and want icons that match Tailwind UI exactly.
You want four hand-tuned sizes (24, 20 and 16 px) for very small UI.
You only need React or Vue components and a small, focused set.

Choose with icons if…

You want the same tidy feel plus five more looks: Duo, Gloss, Engrave, Blueprint and Sketch.
You want packages for Svelte, Angular, Solid and a web component, or plain <i> classes.
You want icons for slides and docs too, with copy as PNG in any colour.

Migration guide

Switch from Heroicons in minutes

Heroicons components end in Icon and the style is in the import path. with icons components drop the suffix (both Home and HomeIcon are exported) and use @withicons/react/solid for solid.

Before · Heroicons

import { HomeIcon, Cog6ToothIcon } from '@heroicons/react/24/outline'
import { HeartIcon } from '@heroicons/react/24/solid'

<HomeIcon className="size-6" />
<Cog6ToothIcon className="size-6" />
<HeartIcon className="size-6 text-rose-500" />

After · with icons

import { Home, Settings } from '@withicons/react'
import { Heart } from '@withicons/react/solid'

<Home className="size-6" />
<Settings className="size-6" />
<Heart className="size-6 text-rose-500" />

Heroicons Outline → our Line; Solid, Mini and Micro → our Solid. Tailwind size-* and text-* classes keep working because our icons use currentColor.

Paste your Heroicons code

It converts as you type, right here in your browser: known names from the table, plus a meaning search for the rest. Check the result; icons we don’t have are listed so you can search for them.

Heroicons code

with icons code

import { HomeIcon, Cog6ToothIcon, XMarkIcon } from '@heroicons/react/24/outline'
import { HeartIcon } from '@heroicons/react/24/solid'

export function Bar() {
  return <nav><HomeIcon className="size-6" /><Cog6ToothIcon className="size-6" /><XMarkIcon /><HeartIcon /></nav>
}

Turn on JavaScript to convert.

Name map: common icons

Show with icons in

Heroicons icons and their with icons equivalents
Heroicons	with icons
`home / HomeIcon`	home`<Home />`
`magnifying-glass / MagnifyingGlassIcon`	search`<Search />`
`trash / TrashIcon`	trash`<Trash />`
`cog-6-tooth / Cog6ToothIcon`	settings`<Settings />`
`user / UserIcon`	user`<User />`
`envelope / EnvelopeIcon`	mail`<Mail />`
`x-mark / XMarkIcon`	close`<Close />`
`check / CheckIcon`	check`<Check />`
`plus / PlusIcon`	plus`<Plus />`
`bars-3 / Bars3Icon`	menu`<Menu />`
`pencil-square / PencilSquareIcon`	edit`<Edit />`
`pencil / PencilIcon`	pencil`<Pencil />`
`arrow-down-tray / ArrowDownTrayIcon`	download`<Download />`
`arrow-up-tray / ArrowUpTrayIcon`	upload`<Upload />`
`heart / HeartIcon`	heart`<Heart />`
`star / StarIcon`	star`<Star />`
`bell / BellIcon`	bell`<Bell />`
`calendar / CalendarIcon`	calendar`<Calendar />`
`lock-closed / LockClosedIcon`	lock`<Lock />`
`arrow-right / ArrowRightIcon`	arrow-right`<ArrowRight />`
`chevron-down / ChevronDownIcon`	chevron-down`<ChevronDown />`
`share / ShareIcon`	share`<Share />`
`document-duplicate / DocumentDuplicateIcon`	copy`<Copy />`
`arrow-top-right-on-square / ArrowTopRightOnSquareIcon`	external-link`<ExternalLink />`
`eye / EyeIcon`	eye`<Eye />`
`funnel / FunnelIcon`	filter`<Filter />`
`information-circle / InformationCircleIcon`	info-circle`<InfoCircle />`
`exclamation-triangle / ExclamationTriangleIcon`	alert-triangle`<AlertTriangle />`
`shopping-cart / ShoppingCartIcon`	shopping-cart`<ShoppingCart />`
`photo / PhotoIcon`	image`<Image />`
`phone / PhoneIcon`	phone`<Phone />`

Heroicons icons © Tailwind Labs, Inc., MIT License (v2.2.0), from the official package and shown only for comparison.

Find the with icons version of any Heroicons icon

Type the Heroicons name or just what it means (“cog”). Search understands synonyms and typos across all 500 icons.

Search icons

Any colour

Click an icon to copy it as JSX for React. The arrow opens its page.

FAQ

Heroicons alternative: questions

What is the best free alternative to Heroicons?

It depends on what you need. with icons is a free, MIT-licensed set of 500 icons in 20 styles that works in code, slides, docs and design tools, with no credit required. Other popular free options include Font Awesome, Material Symbols, Lucide; compare them all.

Is Heroicons free?

Free. Licence: MIT. (Checked 1 October 2026; see the sources below.)

How many icons does with icons have compared with Heroicons?

with icons has 500 icons, each drawn in 20 styles (10,000 SVGs). Heroicons: 316 (“316 icons”). Heroicons is the bigger library; with icons focuses on a curated set with more styles.

Do I need to credit with icons?

No. with icons is MIT licensed: free for personal and commercial use with no attribution. If you redistribute the icon files themselves, include the licence text. Licence in plain words.

Do with icons work with Tailwind CSS like Heroicons?

Yes. Icons use currentColor and accept className, so size-6 and text-rose-500 work the same way.

Sources

Where these facts come from

Official Heroicons pages, repositories and package registries, checked 1 October 2026. Spotted something out of date? Tell us on GitHub.

Heroicons website · heroicons.com
Heroicons README (GitHub) · github.com/tailwindlabs/heroicons
Heroicons Figma file · www.figma.com/community/file/1143911270904274171
Heroicons 24/outline SVGs (names) · github.com/tailwindlabs/heroicons/tree/master/optimized/24/outline

Try with icons instead of Heroicons

500 icons, 20 styles, MIT. Nothing to install to start: copy, download or drag.

Browse all icons