switching from Font Awesome?

A free Font Awesome alternative

Q: Can I use with icons and Font Awesome on the same page?

Yes. The class names don’t clash (with- vs fa-), so you can move over one screen at a time.

Short answer

Looking for a Font Awesome alternative? with icons is a free, MIT-licensed set of 500 icons in 20 styles: copy them as SVG or PNG, use  tags, or install them from npm for React, Vue, Svelte, Angular and Solid. Font Awesome is the web’s most widely used icon toolkit: easy  tag classes, brand logos, a free set of over 2,000 icons and a huge Pro catalogue with many families and styles. 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

Font Awesome vs with icons

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

Font Awesome compared with with icons
Feature	Font Awesome	with icons
Licence	Font Awesome Free: icons CC BY 4.0, fonts SIL OFL 1.1, code MIT. Pro is a commercial licence[1]	MIT, for the icons and the code
Price	Free plan; paid Pro plans billed yearly or monthly (see the plans page for current prices)[2]	Free. No paid tier, no account
Icons	Over 2,000 free icons (2,163 in the official API for version 7.3.1); Pro adds many more icons and styles[3]	500 icons × 20 styles (10,000 SVGs)
Styles	Free: Solid, Regular (a subset) and Brands. Pro adds Light, Thin, Duotone, Sharp and more families[3][4]	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	Official React, Vue, Angular and Svelte packages, plus SVG + JS and web fonts[5]	React, Vue, Svelte, Angular, Solid and a `<with-icon>` web component, all on npm; plus SVG, PNG and sprites
CSS classes / icon font	Yes: `<i class="fa-solid fa-house"></i>`[4]	Yes: `<i class="with with-home"></i>`, add `with-solid` etc. for other styles
Self-hosting	Yes: download or npm (`@fortawesome/fontawesome-free`); Kits are optional[5]	Yes: download SVGs, sprites and CSS (developers)
Design tools	Official Figma plugin (Pro icons need a paid plan)[6]	Copy SVG and paste into Figma, Canva, PowerPoint (guides)
AI / MCP	Official AI agent tools (skills and a CLI, “early days”) and an llms.txt for the docs; no official MCP server found[7][8]	llms.txt an agent skill and an MCP server (`@withicons/mcp`)
Credit required?	Technically yes (CC BY 4.0), but the licence says the comments already in the files are enough[1]	No

Font Awesome 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 Font Awesome if…

You need brand logos (GitHub, Slack, Visa…) or one of thousands of niche icons.
Your team already knows the fa- names and you have a Pro plan you’re happy with.
You want many weights and families (Light, Thin, Sharp, Duotone) and are fine paying for Pro.

Choose with icons if…

You want the Font Awesome way of working () under a plain MIT licence, with nothing behind a paywall.
You want expressive styles for free: Duo, Gloss, Engrave, Blueprint and Sketch next to Line and Solid.
You want a smaller, tidy set (500 icons) that covers everyday interfaces, slides and docs, in 20 styles that can also move.

Migration guide

Switch from Font Awesome in minutes

Same idea, different names: one setup line, then  tags. Replace fa-solid fa- with with with-, add with-solid where you used solid, and fix the names that differ (house → home, xmark → close). Older Font Awesome 4/5 names such as fa-times and fa-cog are understood by the converter too.

Before · Font Awesome

<link rel="stylesheet" href="…/fontawesome/css/all.min.css">

<i class="fa-solid fa-house"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-solid fa-gear fa-spin"></i>
<i class="fa-solid fa-xmark fa-2x"></i>

After · with icons

<script src="https://cdn.jsdelivr.net/npm/@withicons/classes/dist/with-loader.js" defer></script>

<i class="with with-home with-solid"></i>
<i class="with with-heart"></i>
<i class="with with-settings with-solid with-spin"></i>
<i class="with with-close with-solid with-2x"></i>

Font Awesome Regular → our Line (no style class); Solid → with-solid; Duotone → with-duo. Brand logos aren’t part of with icons.

Paste your Font Awesome 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.

Font Awesome code

with icons code

<i class="fa-solid fa-house"></i>
<i class="fa-regular fa-heart"></i>
<i class="fa-solid fa-gear fa-spin"></i>
<i class="fa fa-times fa-2x"></i>
<button><i class="fa-solid fa-cart-shopping"></i> Checkout</button>

Turn on JavaScript to convert.

Name map: common icons

Show with icons in

Font Awesome icons and their with icons equivalents
Font Awesome	with icons
`fa-house`	home`with-home`
`fa-magnifying-glass`	search`with-search`
`fa-trash`	trash`with-trash`
`fa-trash-can`	trash`with-trash`
`fa-gear`	settings`with-settings`
`fa-user`	user`with-user`
`fa-envelope`	mail`with-mail`
`fa-xmark`	close`with-close`
`fa-check`	check`with-check`
`fa-plus`	plus`with-plus`
`fa-bars`	menu`with-menu`
`fa-pen-to-square`	edit`with-edit`
`fa-pen`	pencil`with-pencil`
`fa-download`	download`with-download`
`fa-upload`	upload`with-upload`
`fa-heart`	heart`with-heart`
`fa-star`	star`with-star`
`fa-bell`	bell`with-bell`
`fa-calendar`	calendar`with-calendar`
`fa-calendar-days`	calendar-days`with-calendar-days`
`fa-lock`	lock`with-lock`
`fa-arrow-right`	arrow-right`with-arrow-right`
`fa-chevron-down`	chevron-down`with-chevron-down`
`fa-share-nodes`	share`with-share`
`fa-copy`	copy`with-copy`
`fa-arrow-up-right-from-square`	external-link`with-external-link`
`fa-eye`	eye`with-eye`
`fa-filter`	filter`with-filter`
`fa-circle-info`	info-circle`with-info-circle`
`fa-triangle-exclamation`	alert-triangle`with-alert-triangle`
`fa-cart-shopping`	shopping-cart`with-shopping-cart`
`fa-image`	image`with-image`
`fa-phone`	phone`with-phone`

Font Awesome icons © Fonticons, Inc., CC BY 4.0 (v7.3.1), from the official package and shown only for comparison.

Find the with icons version of any Font Awesome icon

Type the Font Awesome name or just what it means (“magnifying glass”). Search understands synonyms and typos across all 500 icons.

Search icons

Any colour

Click an icon to copy its tag. The arrow opens its page.

FAQ

Font Awesome alternative: questions

What is the best free alternative to Font Awesome?

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 Material Symbols, Heroicons, Lucide; compare them all.

Is Font Awesome free?

Free plan; paid Pro plans billed yearly or monthly (see the plans page for current prices). Licence: Font Awesome Free: icons CC BY 4.0, fonts SIL OFL 1.1, code MIT. Pro is a commercial licence. (Checked 1 October 2026; see the sources below.)

How many icons does with icons have compared with Font Awesome?

with icons has 500 icons, each drawn in 20 styles (10,000 SVGs). Font Awesome: over 2,000 free icons (2,163 in the official API for version 7.3.1); Pro adds many more icons and styles. Font Awesome 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.

Is with icons a drop-in replacement for Font Awesome?

Not a drop-in: the class pattern is the same but many names differ, and with icons has 500 icons and no brand logos. For everyday interface icons the switch takes minutes with the name map and converter on this page.

Can I use with icons and Font Awesome on the same page?

Yes. The class names don’t clash (with- vs fa-), so you can move over one screen at a time.

Sources

Where these facts come from

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

Font Awesome Free LICENSE.txt (GitHub) · github.com/FortAwesome/Font-Awesome/blob/7.x/LICENSE.txt
Font Awesome plans · fontawesome.com/plans
Font Awesome API (icon counts, styles) · api.fontawesome.com
Docs: how to add icons · docs.fontawesome.com/web/add-icons/how-to
npm: @fortawesome/fontawesome-free · www.npmjs.com/package/@fortawesome/fontawesome-free
Docs: Figma plugin · docs.fontawesome.com/desktop/add-icons/figma-plugin
Docs: AI agent tools · docs.fontawesome.com/web/use-with/ai-agent-tools
Docs llms.txt · docs.fontawesome.com/llms.txt

Try with icons instead of Font Awesome

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

Browse all icons