switching from Boxicons?
A free Boxicons alternative
Looking for a Boxicons 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. Boxicons is a friendly web icon set with simple class names; version 3 adds React, Vue and Svelte packages and a large Pro catalogue of extra styles and weights. Below: a side-by-side table, when to choose each, and a name map with a converter to switch.
Facts checked
At a glance
Boxicons vs with icons
The facts that usually decide it, side by side. Small numbers link to the source.
| Feature | Boxicons | with icons |
|---|---|---|
| Licence | Free icons CC BY 4.0, fonts SIL OFL 1.1, code MIT; Pro and Brands have their own licences[3] | MIT, for the icons and the code |
| Price | Free plan; Pro $39/year, Team $99/year, Enterprise $249/year (as listed)[2] | Free. No paid tier, no account |
| Icons | Over 3,500 free (“3500+”); “50k+” across all packs including Pro[2][1] | 500 icons × 20 styles (10,000 SVGs) |
| Styles | Free: Basic, Filled and Brands. Pro adds Rounded and Sharp styles, Thin/Bold weights and Duotone packs[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 | React, Vue, Svelte and vanilla JS packages (@boxicons/*), icon font, CLI[4][6] | 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="bx bx-home"></; filled bxf[5] | Yes: <i class="with with-home"></, add with-solid etc. for other styles |
| Self-hosting | Yes: @boxicons/core ships the SVGs and fonts[6] | Yes: download SVGs, sprites and CSS (developers) |
| Design tools | Official Figma plugin (free, with Pro features); Framer plugin[1] | 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? | Required by the free licences, but already included in the files; no action needed (per the docs)[3] | No |
Boxicons facts were checked on 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 Boxicons if…
- You want thousands of free icons with the same simple class-name pattern you already know.
- You want extra weights, rounded and sharp styles and duotones, and are happy to pay for Pro.
- You want an official Figma plugin and brand logos.
Choose with icons if…
- You want everything free under one licence (MIT), with no Pro tier to keep track of.
- You want characterful styles like Gloss, Engrave, Blueprint and Sketch for marketing pages and slides.
- You want AI tools to pick icons for you: llms.txt, an agent skill and an MCP server.
Migration guide
Switch from Boxicons in minutes
Boxicons and with icons both use a base class plus a name class. Swap bx bx- for with with-, then fix the names that differ (Boxicons calls settings cog and mail envelope). Names marked v2 come from Boxicons 2.
<link rel="stylesheet" href="https://cdn.boxicons.com/3.0.8/fonts/basic/boxicons.min.css">
<i class="bx bx-home"></i>
<i class="bx bx-cog bx-spin"></i>
<i class="bxf bx-heart"></i><script src="https://cdn.jsdelivr.net/npm/@withicons/classes/dist/with-loader.js" defer></script>
<i class="with with-home"></i>
<i class="with with-settings with-spin"></i>
<i class="with with-heart with-solid"></i>Boxicons Basic → our Line; Filled (bxf, or bxs- names in v2) → with-solid. In Boxicons 3, bxs means the Sharp style, so check those by eye.
Paste your Boxicons 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.
<i class="bx bx-home"></i> <i class="bx bx-cog bx-spin"></i> <i class="bxf bx-heart"></i> <i class="bx bxs-star"></i> <i class="bx bx-envelope"></i>
Turn on JavaScript to convert.
Name map: common icons
| Boxicons | with icons |
|---|---|
bx-home | homewith-home |
bx-search | searchwith-search |
bx-trash | trashwith-trash |
bx-cog | settingswith-settings |
bx-user | userwith-user |
bx-envelope | mailwith-mail |
bx-x | closewith-close |
bx-check | checkwith-check |
bx-plus | pluswith-plus |
bx-menu | menuwith-menu |
bx-edit | editwith-edit |
bx-pencil | pencilwith-pencil |
bx-download (v2) | downloadwith-download |
bx-upload (v2) | uploadwith-upload |
bx-heart | heartwith-heart |
bx-star | starwith-star |
bx-bell | bellwith-bell |
bx-calendar | calendarwith-calendar |
bx-lock | lockwith-lock |
bx-right-arrow-alt (v2) | arrow-rightwith-arrow-right |
bx-chevron-down | chevron-downwith-chevron-down |
bx-share | sharewith-share |
bx-copy | copywith-copy |
bx-link-external (v2) | external-linkwith-external-link |
bx-show (v2) | eyewith-eye |
bx-filter | filterwith-filter |
bx-info-circle | info-circlewith-info-circle |
bx-error (v2) | alert-trianglewith-alert-triangle |
bx-cart | shopping-cartwith-shopping-cart |
bx-image | imagewith-image |
bx-phone | phonewith-phone |
Boxicons icons © Aniket Suvarna, MIT License (v2.1.4), from the official package and shown only for comparison.
Find the with icons version of any Boxicons icon
Type the Boxicons name or just what it means (“cog”). Search understands synonyms and typos across all 500 icons.
Click an icon to copy its <i> tag. The arrow opens its page.
No icons match yet. Try a simpler word, or browse all 500.
FAQ
Boxicons alternative: questions
What is the best free alternative to Boxicons?
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, Heroicons; compare them all.
Is Boxicons free?
Free plan; Pro $39/year, Team $99/year, Enterprise $249/year (as listed). Licence: Free icons CC BY 4.0, fonts SIL OFL 1.1, code MIT; Pro and Brands have their own licences. (Checked 1 October 2026; see the sources below.)
How many icons does with icons have compared with Boxicons?
with icons has 500 icons, each drawn in 20 styles (10,000 SVGs). Boxicons: over 3,500 free (“3500+”); “50k+” across all packs including Pro. Boxicons 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 I need to credit Boxicons?
The free Boxicons icons are CC BY 4.0, which requires attribution, but the Boxicons docs say the credit is already included in the free files and you don’t need to do anything. with icons is MIT and needs no credit at all.
Sources
Where these facts come from
- Boxicons website · boxicons.com
- Boxicons pricing · boxicons.com/pricing
- Boxicons free licence · docs.boxicons.com/license/free
- Boxicons docs: introduction (v3.0.8) · docs.boxicons.com/introduction
- Boxicons docs: font usage · docs.boxicons.com/font/usage
- @boxicons/core on unpkg · unpkg.com/@boxicons/core@1.0.6
- Boxicons v3 basic CSS used to check names · cdn.boxicons.com/3.0.8/fonts/basic/boxicons.min.css
- Boxicons v2 CSS used to check legacy names · unpkg.com/boxicons@2.1.4/css/boxicons.min.css
Try with icons instead of Boxicons
500 icons, 20 styles, MIT. Nothing to install to start: copy, download or drag.
Browse all icons