Bootstrap Icons alternative · Original SVG icon library
Bootstrap Icons Alternative: Beautiful SVG Icons for Every Project
This is a searchable collection of 4200 original icons, an unofficial Bootstrap Icons alternative built for web designers and developers. Search, preview, copy and download in seconds.
Popular:
Explore All IconsPopular Bootstrap Icons Categories
Every icon belongs to one of 24 themed groups, so you can browse by purpose instead of guessing search words.
If you already know what your project needs, start from a category: arrows for navigation, interface for controls, finance for payments, security for login screens. Each card below shows a few of the base symbols inside, the real number of icons in that group, and the kinds of screens it suits best.
Arrows
Directional pointers, chevrons and flow markers for steering attention.
0 icons · ExploreInterface
Building blocks for menus, grids, toggles and control panels.
0 icons · ExploreNavigation
Wayfinding symbols for menus, sidebars and page structure.
0 icons · ExploreCommunication
Messaging, email and calling symbols for contact flows.
0 icons · ExploreFiles and Documents
Documents, folders and archives for storage features.
0 icons · ExploreMedia and Entertainment
Playback, capture and audio glyphs for media players and galleries.
0 icons · ExploreTechnology
Hardware, networks and data symbols for tech products.
0 icons · ExploreDevelopment
Code, terminal and version-control marks for developer tools.
0 icons · ExploreExplore the Bootstrap Icons Collection
Select any icon to customize it, then copy the code or download the file.
Search by any word
Type a name, a tag or a use case. Searching for "home", "camera" or "payment" narrows thousands of icons instantly, and multiple words must all match.
Filter by category
Use the category menu to limit results to one theme, then sort A to Z, Z to A or by category. Switch the grid density to see more icons at once.
Save your shortlist
Tap the heart on any card to keep it in your favorites. The list is stored in your own browser, so it is still there next time you visit.
No icons found
Try a related word such as home, arrow or camera, or clear the filters.
Featured Bootstrap Icons Collections
Four collections to start with, each with the symbols and uses that fit it best.
Interface
Everything a screen needs to be operated: menus, grids, toggles, sliders and windows. These Bootstrap Icons style symbols keep toolbars and settings panels tidy and easy to scan.
Includes grid, menu, toggle, sliders and more. Each symbol also comes with 24 badge versions such as plus, check, lock or trash.
ToolbarsSettingsDashboardsMobile menus
0 icons · Browse this collectionCommunication
Mail, chat, phone, megaphone and inbox symbols for every way people reach each other. Pair them with a plus, check or bell badge to show new messages, sent items or notifications.
Includes mail, chat, phone, send and more. Each symbol also comes with 24 badge versions such as plus, check, lock or trash.
Contact formsSupport chatNewsletters
0 icons · Browse this collectionFinance
Wallets, cards, coins, banks, safes and receipts for money-related screens. Badge variants such as lock, check and alert help show secure payments, completed orders and failed transactions.
Includes wallet, credit-card, coin, bank and more. Each symbol also comes with 24 badge versions such as plus, check, lock or trash.
CheckoutInvoicesBanking apps
0 icons · Browse this collectionCharts and Analytics
Bar, line, area, pie, donut and gauge symbols for reports and dashboards. Use them to label metrics, switch between chart types or mark trends going up or down.
Includes bar-chart, line-chart, pie-chart, trend and more. Each symbol also comes with 24 badge versions such as plus, check, lock or trash.
AnalyticsReportsKPI boards
0 icons · Browse this collectionAbout This Bootstrap Icons Library
This library collects original line icons drawn on one 24 by 24 grid. Each base symbol appears on its own and with small badges such as plus, check or lock, so you can find the exact variation a screen needs without redrawing anything.
It was built for people who search for Bootstrap Icons style symbols and want a larger, searchable set with clear code output. You can browse by category, test colors and sizes, and take the SVG, HTML or JSX you need.
Everything runs in your browser. There is no account, no sign-up and no build step, which keeps the library fast and easy to host.
Unofficial project
This is not the official Bootstrap Icons package. It does not use Bootstrap code, fonts or assets, and it is not affiliated with the Bootstrap project.
At a glance
- 4200 original icons
- 24 categories
- 24 by 24 grid, 1.75 stroke
- SVG, HTML, JSX, CSS and PNG output
Main Features
Fast icon search
Type a word and the grid narrows instantly using icon names, tags and category names. Partial words work, several words must all match, and a clear button resets everything in one tap.
Organized categories
Twenty-four themed groups make it easy to browse instead of guess. Every category has its own description, a live icon count and a direct link to its icons.
Direct SVG downloads
Every icon is available as its own lightweight file, named after the icon and sorted into category folders, so it is ready to drop into a project.
One-click copying
Copy raw SVG, an HTML snippet, JSX-ready text or CSS usage without leaving the page. If the browser blocks the clipboard, a fallback method still works.
Customizable previews
Try different sizes, icon colors, backgrounds and stroke weights in the detail panel before you take the code, and reset everything with one button.
Local favorites
Keep a personal shortlist in your browser with no sign-up, no password and no server. Filter the grid to favorites at any time.
Developer-friendly code
Clean markup on a fixed 24 by 24 grid that uses currentColor, so icons follow your CSS colors and scale with your layout.
Responsive browsing
The grid, filters and detail panel adapt from small phones to wide monitors, and controls stay large enough to tap comfortably.
How to Use SVG Icons
Inline SVG
Paste the markup into your HTML. The icon inherits the text color of its parent.
<svg viewBox="0 0 24 24" width="24" height="24" fill="none"
stroke="currentColor" stroke-width="1.75"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M4 12h16M14 6l6 6-6 6"/>
</svg>Image usage
Reference a downloaded file when you do not need to recolor it.
<img src="arrow-right.svg" width="24" height="24" alt="">Developer Code Examples
Copy-ready snippets for the most common ways to use an icon. Pick a tab, press Copy Code and paste it straight into your project.
- Plain HTML with currentColor
- CSS sizing and hover states
- JSX for component projects
- Accessible markup for screen readers
- Reusable sprite with the use element
<button class="btn">
<svg viewBox="0 0 24 24" width="20" height="20" fill="none"
stroke="currentColor" stroke-width="1.75"
stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
<path d="M4 12h16M14 6l6 6-6 6"/>
</svg>
Next
</button>.icon { width: 1.5rem; height: 1.5rem; color: #000; }
.icon:hover { color: #7c5cff; }
.icon--lg { width: 2.5rem; height: 2.5rem; stroke-width: 1.5; }
@media (max-width: 480px) { .icon { width: 1.25rem; height: 1.25rem; } }export function ArrowRight({ size = 24 }) {
return (
<svg viewBox="0 0 24 24" width={size} height={size} fill="none"
stroke="currentColor" strokeWidth="1.75"
strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
<path d="M4 12h16M14 6l6 6-6 6"/>
</svg>
);
}<!-- Decorative: text already explains the action -->
<svg aria-hidden="true" focusable="false">...</svg>
<!-- Icon-only button needs a name -->
<button aria-label="Search">
<svg aria-hidden="true" focusable="false">...</svg>
</button><svg style="display:none">
<symbol id="arrow-right" viewBox="0 0 24 24">
<path d="M4 12h16M14 6l6 6-6 6"/>
</symbol>
</svg>
<svg width="24" height="24" fill="none" stroke="currentColor">
<use href="#arrow-right"/>
</svg>Customization Features
Open any icon to shape it before you copy or download it.
Size from 16 to 256 px
Drag the slider to see how an icon looks at toolbar size or as a large hero graphic. The preview updates the moment you move it.
Icon and background colors
Pick any icon color and background tile to test contrast and brand fit. The copied code keeps the color you choose.
Three stroke weights
Switch between thin, regular and bold lines to match your typography, from delicate editorial layouts to chunky app interfaces.
Preview background
Change the surface behind the icon to check it on light, dark or colorful sections before you commit to a design.
Many export formats
Copy SVG, HTML, JSX or CSS, or download an SVG or PNG file made with exactly the settings on screen.
One-tap reset
Experiment freely. The reset button returns size, colors and stroke weight to the defaults in one click.
Why Choose This Bootstrap Icons Alternative
Six reasons designers and developers pick this library.
Original drawings
Every icon was drawn for this project, so you get a fresh, consistent set instead of recycled artwork.
One consistent style
The same grid, stroke weight and corner style across all categories means icons look right side by side.
Works offline
The whole library loads from local files. Open the pages from your computer or host them on ordinary shared hosting.
Developer-ready output
Clean, readable markup with currentColor and a fixed viewBox, ready for HTML, CSS or component code.
Honest licensing
Usage terms are published on the license page only when the owner defines them, and nothing is promised in advance.
Accessible by default
Keyboard-friendly controls, visible focus, a labeled search field and guidance for accessible icon use.
Frequently Asked Questions
Icon Library
The collection currently holds 4200 icons. The exact number is calculated from the dataset, so it stays accurate when icons are added.
This site is its own project with its own drawings, code and design. It is not the official Bootstrap Icons package and is not affiliated with the Bootstrap project.
It is an alternative SVG collection for people searching for similar icons. It does not use Bootstrap Icons class names, fonts or its CDN.
Icons are grouped into 24 categories such as arrows, interface, finance and weather, and every icon also carries searchable tags.
Yes. Every icon uses a 24x24 grid, a 1.75 stroke, rounded caps and joins, and the currentColor value.
SVG Download and Usage
Use the download button on any card or inside the icon detail panel. You get a standalone .svg file named after the icon.
Press the copy button to place the full SVG markup on your clipboard. A fallback method is used if the browser blocks the Clipboard API.
Yes, the detail panel can export a PNG at the size and colors you set, in browsers that support canvas export.
Yes. Reference a downloaded file with an img tag. Note that currentColor styling only works with inline SVG.
The detail panel copies a JSX-ready snippet as plain text, with attribute names converted for React-style syntax.
Customization and Development
Inline SVG inherits the CSS color property because strokes use currentColor. Set color on the icon or its parent.
Yes. Set width and height in CSS or attributes. The viewBox keeps proportions intact.
The detail panel offers stroke width controls, and in your own CSS you can set stroke-width on the svg element.
Decorative icons should use aria-hidden. Meaningful icons need a title or an accessible label on the parent control. The How to Use section shows both.
No. It is plain HTML, CSS and JavaScript with a local dataset, so it works from file:// and on ordinary Apache hosting.
Licensing and Support
The license has not been defined yet. This is a decision for the site owner, who should edit license.html before publishing.
That depends on the license the owner chooses. Until one is published, do not assume any usage rights.
Unknown until the owner sets terms. The license page will state the requirement once defined.
Email the address shown on the Contact page with the page address, your browser and a short description of the problem.
No. Favorites live in your own browser through local storage and no account is needed.