switching from Bootstrap Icons?

A free Bootstrap Icons alternative

Q: Can I use with icons in a Bootstrap project?

Yes. The classes don’t depend on any framework and sit happily next to Bootstrap’s CSS.

Short answer

Looking for a Bootstrap Icons 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. Bootstrap Icons is Bootstrap’s official icon library: over 2,000 polished icons on a 16 px grid with an easy web font, usable with or without Bootstrap. 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

Bootstrap Icons vs with icons

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

Bootstrap Icons compared with with icons
Feature	Bootstrap Icons	with icons
Licence	MIT[3]	MIT, for the icons and the code
Price	Free[1]	Free. No paid tier, no account
Icons	Over 2,000 (“over 2,000 icons”; 2,078 in v1.13.1)[1][5]	500 icons × 20 styles (10,000 SVGs)
Styles	One look, with separate outline and `-fill` versions of many icons; 16 × 16 grid[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	No official framework components; SVGs, a sprite and a web font that work in any project[2]	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="bi bi-house"></i>`[1]	Yes: `<i class="with with-home"></i>`, add `with-solid` etc. for other styles
Self-hosting	Yes: npm, Composer or download from GitHub releases[2]	Yes: download SVGs, sprites and CSS (developers)
Design tools	Official Figma file[2]	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)[3]	No

Bootstrap Icons 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 Bootstrap Icons if…

Your site is built on Bootstrap and you want icons that match it exactly.
You need over 2,000 icons, including many outline/fill pairs.
You want a dependable, simple web font with no build step.

Choose with icons if…

You want official components for React, Vue, Svelte, Angular and Solid.
You want 24 px icons with more styles: Duo, Gloss, Engrave, Blueprint and Sketch.
You want AI assistants to find icons for you through llms.txt, a skill or MCP.

Migration guide

Switch from Bootstrap Icons in minutes

Both use a base class plus a name class, so the change is mostly bi bi- → with with-. Bootstrap marks filled icons with a -fill suffix; with icons uses with-solid.

Before · Bootstrap Icons

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css">

<i class="bi bi-house"></i>
<i class="bi bi-heart-fill"></i>
<i class="bi bi-gear"></i>

After · with icons

<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-heart with-solid"></i>
<i class="with with-settings"></i>

Bootstrap outline icons → our Line; -fill icons → with-solid. Icons size with the font, just like Bootstrap’s.

Paste your Bootstrap Icons 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.

Bootstrap Icons code

with icons code

<i class="bi bi-house"></i>
<i class="bi bi-heart-fill"></i>
<i class="bi bi-gear"></i>
<i class="bi bi-person-fill"></i>
<i class="bi bi-telephone"></i>

Turn on JavaScript to convert.

Name map: common icons

Show with icons in

Bootstrap Icons icons and their with icons equivalents
Bootstrap Icons	with icons
`bi-house`	home`with-home`
`bi-search`	search`with-search`
`bi-trash`	trash`with-trash`
`bi-gear`	settings`with-settings`
`bi-person`	user`with-user`
`bi-envelope`	mail`with-mail`
`bi-x`	close`with-close`
`bi-x-lg`	close`with-close`
`bi-check`	check`with-check`
`bi-plus`	plus`with-plus`
`bi-list`	menu`with-menu`
`bi-pencil`	pencil`with-pencil`
`bi-download`	download`with-download`
`bi-upload`	upload`with-upload`
`bi-heart`	heart`with-heart`
`bi-star`	star`with-star`
`bi-bell`	bell`with-bell`
`bi-calendar`	calendar`with-calendar`
`bi-lock`	lock`with-lock`
`bi-arrow-right`	arrow-right`with-arrow-right`
`bi-chevron-down`	chevron-down`with-chevron-down`
`bi-share`	share`with-share`
`bi-copy`	copy`with-copy`
`bi-box-arrow-up-right`	external-link`with-external-link`
`bi-eye`	eye`with-eye`
`bi-funnel`	filter`with-filter`
`bi-info-circle`	info-circle`with-info-circle`
`bi-exclamation-triangle`	alert-triangle`with-alert-triangle`
`bi-cart`	shopping-cart`with-shopping-cart`
`bi-image`	image`with-image`
`bi-telephone`	phone`with-phone`

Bootstrap Icons icons © The Bootstrap Authors, MIT License (v1.13.1), from the official package and shown only for comparison.

Find the with icons version of any Bootstrap Icons icon

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

Search icons

Any colour

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

FAQ

Bootstrap Icons alternative: questions

What is the best free alternative to Bootstrap Icons?

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 Bootstrap Icons free?

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

How many icons does with icons have compared with Bootstrap Icons?

with icons has 500 icons, each drawn in 20 styles (10,000 SVGs). Bootstrap Icons: over 2,000 (“over 2,000 icons”; 2,078 in v1.13.1). Bootstrap Icons 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.

Can I use with icons in a Bootstrap project?

Yes. The <i class="with with-…"> classes don’t depend on any framework and sit happily next to Bootstrap’s CSS.

Sources

Where these facts come from

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

Bootstrap Icons website · icons.getbootstrap.com
Bootstrap Icons README (GitHub) · github.com/twbs/icons#readme
Bootstrap Icons licence · github.com/twbs/icons/blob/main/LICENSE
Bootstrap Icons releases · github.com/twbs/icons/releases
bootstrap-icons.json v1.13.1 (names) · unpkg.com/bootstrap-icons@1.13.1/font/bootstrap-icons.json

Try with icons instead of Bootstrap Icons

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

Browse all icons