Bootstrap Icons Search Online

Find and preview Bootstrap icon classes instantly

What is Bootstrap Icons Classes Search?

The Bootstrap Icons Classes Search is a powerful tool that helps you quickly find and use Bootstrap Icons in your projects. With over 1,800 free, high-quality icons, this tool provides an intuitive search interface to locate the perfect icon by name, keyword, and instantly get the correct CSS classes and implementation code.

How to Search and Use Bootstrap Icons

With the "Bootstrap Icons Classes Search" tool, you can easily discover icons, preview them in different sizes and colors, and copy the ready-to-use HTML code for your projects.

Steps
  • 1

    Use the search box to find icons by name or keyword, or browse through categorized icon collections.

  • 2

    Preview icons in different sizes and colors to see how they'll look in your design.

  • 3

    Select your preferred icon and customize its appearance (size, color, alignment).

  • 4

    Copy the generated HTML code with the correct Bootstrap Icons classes and paste it into your project.

Key Features

Smart Search

Find icons instantly with intelligent search that understands synonyms and related terms.

Live Preview

See icons in real-time with customizable size, color, and styling options.

Code Generation

Get production-ready HTML code with proper Bootstrap Icons classes.

Multiple Formats

Access icons as SVG, font icons, or embedded SVGs for different use cases.

Usage Examples

See practical implementation examples for buttons, navigation, and more.

Overview

The Bootstrap Icons Classes Search tool simplifies the process of finding and implementing Bootstrap Icons in your web projects. With a comprehensive database of all available icons and an intuitive search interface, you can quickly locate the perfect icon for any context. The tool provides not just the icon names, but also practical implementation code, sizing options, and styling guidance, making it an essential resource for developers and designers working with Bootstrap.

Implementation Examples

Different Icon Implementations:

⭐
⭐
⭐
<!-- Basic Icon -->
<i class="bi bi-star"></i>

<!-- Icon with custom size -->
<i class="bi bi-star" style="font-size: 1.5rem;"></i>

<!-- Colored Icon -->
<i class="bi bi-star" style="color: #dc3545; font-size: 2rem;"></i>

Why Use This Tool?

  • Time Efficiency: Find icons faster than browsing official documentation
  • Accurate Implementation: Get correct class names and usage examples
  • Visual Discovery: See icons in context before implementation
  • Learning Resource: Understand Bootstrap Icons naming conventions and patterns

Bootstrap Icons Integration Methods

  • CSS Method: Include Bootstrap Icons CSS file and use <i class="bi bi-icon-name"> (Recommended)
  • SVG Sprite: Use SVG sprite method for better performance
  • NPM Package: Install via npm for build process integration
  • CDN: Use CDN for quick implementation without downloads

Icon Sizing and Styling

Size Class Pixel Equivalent Usage
bi (default) 16px Inline text, small buttons
style="font-size: 1.5rem;" 24px Standard buttons, headings
style="font-size: 2rem;" 32px Feature icons, large buttons
style="font-size: 3rem;" 48px Hero sections, prominent features

Browser Compatibility

The Bootstrap Icons Classes Search tool works in all modern browsers. The generated Bootstrap Icons code is compatible with all browsers that support web fonts and SVG, including Chrome, Firefox, Safari, and Edge.

Privacy & Security

  • No Data Collection: Your searches and icon selections remain private
  • Client-Side Processing: All search and preview functionality happens in your browser
  • No Tracking: We don't track your searches or icon preferences
  • Open Source Icons: Bootstrap Icons are MIT licensed and free to use

In summary, DeepToolSet's Bootstrap Icons Classes Search is an essential tool for any developer or designer working with Bootstrap. It transforms the icon discovery process from a tedious search through documentation into an intuitive, visual experience that accelerates your workflow and ensures correct implementation.

Bootstrap Icons Classes Search FAQ (Frequently Asked Questions)

Find answers to common questions about our Bootstrap Icons Classes Search tool

Our search tool offers multiple ways to find the perfect icon:

Search Methods:
  • Keyword Search - Use descriptive terms
  • Style Filtering - Filled vs outlined icons
  • Advanced Search - Multiple criteria combined
Search Tips:
  • Use synonyms (search "user" for "person")
  • Try related terms ("email" for "envelope")
  • Search by style ("filled", "outline")
Search Examples:
"search"
"heart fill"
"arrow direction"

Bootstrap Icons include 1,800+ icons across multiple categories and styles:

Popular Categories:
Arrows Communication Devices Files Finance Media Navigation People Social Weather
Icon Styles:
  • Outlined - Default style (bi-icon-name)
  • Filled - Solid fill (bi-icon-name-fill)
  • Custom Colors - CSS color customization
  • Sizes - Multiple size classes available
Style Examples:
Outlined
Filled
Colored
Large

We provide multiple integration methods for different use cases:

Basic Usage:
  • CDN inclusion (recommended)
  • NPM package installation
  • Download and self-host
  • Framework integration
Advanced Usage:
  • SVG sprite usage
  • Custom build processes
  • Framework components
  • Dynamic loading
Basic HTML Usage:
<!-- Include via CDN -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">

<!-- Use in HTML -->
<i class="bi bi-heart"></i>
<i class="bi bi-heart-fill text-danger"></i>
<i class="bi bi-arrow-right fs-3"></i>
React Component Example:
import 'bootstrap-icons/font/bootstrap-icons.css';

function MyComponent() {
  return (
    <div>
      <i className="bi bi-star-fill text-warning" />
      <span>Favorite</span>
    </div>
  );
}

Yes! Bootstrap Icons are highly customizable using CSS:

Size Customization:
  • Bootstrap font-size utilities
  • Custom CSS font-size
  • Relative sizing (em, rem)
  • Responsive sizing classes
Color & Style:
  • Bootstrap color utilities
  • Custom CSS color property
  • Hover effects and transitions
  • Background and border styling
Customization Examples:
fs-1 (2.5rem)
fs-4 + primary
Styled
Animated
CSS Customization Examples:
/* Size and color */
.bi-custom-icon {
  font-size: 2rem;
  color: #ff6b35;
}

/* Hover effects */
.bi-custom-icon:hover {
  color: #e83e8c;
  transform: scale(1.2);
  transition: all 0.3s ease;
}

/* Animation */
.spinning {
  animation: spin 2s linear infinite;
}

To copy the icon, you just have to select the icon. After that, click any code box to copy its icon code. After copy, just paste on your projects to start using them. Don't forget to include the CDN to make those icons work on your projects.

Yes, we provide accessibility guidance for proper icon usage:

Accessibility Best Practices:
  • Use descriptive aria-labels
  • Provide text alternatives
  • Ensure sufficient color contrast
  • Use semantic HTML elements
  • Test with screen readers
Implementation Examples:
  • Decorative vs functional icons
  • Icon-only buttons
  • Combined icon and text
  • Focus management
Accessible Icon Examples:
<!-- Decorative icon (hidden from screen readers) -->
<i class="bi bi-star" aria-hidden="true"></i>

<!-- Functional icon with label -->
<button aria-label="Favorite">
  <i class="bi bi-heart" aria-hidden="true"></i>
</button>

<!-- Icon with visible text -->
<button>
  <i class="bi bi-download" aria-hidden="true"></i>
  Download
</button>

No! We do not offer comprehensive organization features. However, we will definitely add this feature in future. So, keep checking this page.

Our search tool offers distinctive advantages:

  • Intelligent search with synonyms and related terms
  • Visual preview with instant code generation
  • Multiple export formats and frameworks
  • Accessibility guidance and best practices
  • Advanced organization and collection management
  • Real-time customization and styling preview
  • Regular updates with new icons
  • Excellent documentation and examples
Search Bootstrap Icons Classes Now

Free to use • No registration required • Unlimited conversions

Other Programming Tools

Cookie Consent Demo

This page demonstrates a working cookie consent implementation

Cookie Consent Implementation

This page includes a fully functional cookie consent banner that:

  • Appears when a user first visits the site
  • Allows users to accept all, reject all, or customize cookie preferences
  • Remembers user preferences for future visits
  • Provides a way to change preferences at any time
  • Works with common cookie types (necessary, analytics, advertising)

Current Cookie Status

Settings

Logo Header


Navbar Header


Sidebar