Bootstrap Icons

Bootstrap Icons is an icon library maintained by the Bootstrap project. It provides a large collection of icons for common interface needs.

Icons can be used for:

• Navigation menus.
• Buttons.
• Forms.
• Dashboards.
• Social links.
• Alerts and notifications.
• Search interfaces.
• Action controls.

Bootstrap Icons is not included automatically when you include the Bootstrap CSS framework.

Bootstrap provides the layout and component framework, while Bootstrap Icons provides the icon library.

<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">


<!-- Bootstrap Icons -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css"
rel="stylesheet">

Bootstrap Icons are commonly added using an element such as <i> with the bi class and a specific icon class.

<i class="bi bi-alarm"></i>

The first class, bi, identifies the Bootstrap Icons font. The second class identifies the specific icon.

The bi-alarm icon can be used to represent an alarm or time-related action.

<i class="bi bi-alarm"></i>

You can place icons next to text, inside buttons, or in navigation menus.

The bi-house icon is commonly used for home or dashboard navigation.

<i class="bi bi-house"></i>

Example:

<a href="#" class="text-decoration-none">

    <i class="bi bi-house"></i>
    Home

</a>

The bi-search icon is useful for search buttons and search fields.

<i class="bi bi-search"></i>

It can be combined with an input group.

<div class="input-group">

    <input
    type="text"
    class="form-control"
    placeholder="Search">

    <button class="btn btn-primary">

        <i class="bi bi-search"></i>

    </button>

</div>

The bi-person icon is useful for user profiles and account sections.

<i class="bi bi-person"></i>

Example:

<a href="#" class="btn btn-outline-primary">

    <i class="bi bi-person"></i>
    Profile

</a>

The bi-heart icon can represent favorites, likes, or saved items.

<i class="bi bi-heart"></i>

Bootstrap Icons also includes filled variations for many icons.

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

The bi-star icon can be used for ratings, favorites, and featured content.

<i class="bi bi-star"></i>

A filled version is also available.

<i class="bi bi-star-fill"></i>

The bi-check icon can indicate completion or success.

<i class="bi bi-check"></i>

A filled check-circle is useful for success messages.

<i class="bi bi-check-circle-fill"></i>

The bi-x icon can represent close, cancel, or remove actions.

<i class="bi bi-x"></i>

For a circular close indicator, you can use:

<i class="bi bi-x-circle"></i>

The bi-trash icon is commonly used for delete actions.

<i class="bi bi-trash"></i>

Example:

<button class="btn btn-danger">

    <i class="bi bi-trash"></i>
    Delete

</button>

The bi-pencil icon is useful for edit actions.

<i class="bi bi-pencil"></i>

Example:

<button class="btn btn-warning">

    <i class="bi bi-pencil"></i>
    Edit

</button>

The bi-download icon is useful for download links and buttons.

<i class="bi bi-download"></i>

Example:

<a href="#" class="btn btn-primary">

    <i class="bi bi-download"></i>
    Download

</a>

The bi-upload icon can be used for upload actions.

<i class="bi bi-upload"></i>

Example:

<button class="btn btn-success">

    <i class="bi bi-upload"></i>
    Upload File

</button>

The bi-envelope icon is commonly used for email and message interfaces.

<i class="bi bi-envelope"></i>

Example:

<a href="mailto:example@example.com">

    <i class="bi bi-envelope"></i>
    Email Us

</a>

The bi-telephone icon can represent phone contact information.

<i class="bi bi-telephone"></i>

It can be combined with a telephone link.

<a href="tel:+911234567890">

    <i class="bi bi-telephone"></i>
    Call Us

</a>

The bi-geo-alt icon can represent an address or location.

<i class="bi bi-geo-alt"></i>

Example:

<p>

    <i class="bi bi-geo-alt"></i>

    Aurangabad, Bihar

</p>

Icons can be placed before or after button text.

<button class="btn btn-primary">

    <i class="bi bi-save"></i>
    Save

</button>


<button class="btn btn-danger">

    Delete
    <i class="bi bi-trash"></i>

</button>

Icons can make the purpose of an action easier to recognize.

Bootstrap Icons use the current text color and can be sized using Bootstrap font-size utilities.

<i class="bi bi-star fs-1"></i>

<i class="bi bi-star fs-2"></i>

<i class="bi bi-star fs-3"></i>

<i class="bi bi-star fs-4"></i>

<i class="bi bi-star fs-5"></i>

The fs-* classes control font size.

Because Bootstrap Icons behave like font-based icons, text color utilities can be used to change their color.

<i
class="bi bi-heart-fill text-danger">

</i>


<i
class="bi bi-check-circle-fill text-success">

</i>


<i
class="bi bi-info-circle-fill text-primary">

</i>

Icons can make navigation menus easier to understand.

<nav class="nav flex-column">


    <a
    href="#"
    class="nav-link">

        <i class="bi bi-house"></i>
        Home

    </a>


    <a
    href="#"
    class="nav-link">

        <i class="bi bi-book"></i>
        Courses

    </a>


    <a
    href="#"
    class="nav-link">

        <i class="bi bi-person"></i>
        Profile

    </a>


</nav>

Icons can be used with input groups to provide visual hints.

<div class="input-group">

    <span class="input-group-text">

        <i class="bi bi-person"></i>

    </span>


    <input
    type="text"
    class="form-control"
    placeholder="Username">

</div>

The icon helps users understand what information belongs in the input.

Icons can be combined with Bootstrap alerts.

<div class="alert alert-success">

    <i class="bi bi-check-circle-fill"></i>

    Your registration was successful.

</div>


<div class="alert alert-danger">

    <i class="bi bi-exclamation-triangle-fill"></i>

    Something went wrong.

</div>

Many Bootstrap Icons have different visual variations.

<i class="bi bi-star"></i>

<i class="bi bi-star-fill"></i>


<i class="bi bi-heart"></i>

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


<i class="bi bi-person"></i>

<i class="bi bi-person-fill"></i>

The exact available variations depend on the icon.

Icons should be used carefully when they communicate important information.

If an icon is only decorative, it can often be hidden from assistive technologies.

<i
class="bi bi-star-fill"
aria-hidden="true">

</i>

If an icon-only button performs an action, provide an accessible label.

<button
type="button"
class="btn btn-primary"
aria-label="Search">

    <i
    class="bi bi-search"
    aria-hidden="true">

    </i>

</button>

Avoid these common mistakes:

• Forgetting to include the Bootstrap Icons stylesheet.
• Using an incorrect icon class name.
• Using icons without considering accessibility.
• Using an icon alone when the action is unclear.
• Using too many different icon styles on one page.
• Using very large icons where a smaller icon would be clearer.
• Forgetting that Bootstrap Icons is separate from Bootstrap CSS.

Icons are especially useful in dashboard statistics.

<div class="row g-4">


    <div class="col-md-4">

        <div class="card shadow-sm">

            <div class="card-body">

                <i
                class="bi bi-people fs-1
                text-primary">

                </i>

                <h5>
                    Students
                </h5>

                <h2>
                    250
                </h2>

            </div>

        </div>

    </div>


    <div class="col-md-4">

        <div class="card shadow-sm">

            <div class="card-body">

                <i
                class="bi bi-book fs-1
                text-success">

                </i>

                <h5>
                    Courses
                </h5>

                <h2>
                    20
                </h2>

            </div>

        </div>

    </div>


</div>

Icons can be combined with Bootstrap buttons to create useful action groups.

<div class="d-flex gap-2">


    <button
    class="btn btn-primary">

        <i class="bi bi-pencil"></i>
        Edit

    </button>


    <button
    class="btn btn-success">

        <i class="bi bi-check-lg"></i>
        Save

    </button>


    <button
    class="btn btn-danger">

        <i class="bi bi-trash"></i>
        Delete

    </button>


</div>

This complete example combines Bootstrap Icons with cards, buttons, navigation, colors, sizing, and accessibility attributes.

<div class="container py-5">


    <div class="card shadow-sm">


        <div
        class="card-header
        bg-primary
        text-white">

            <i
            class="bi bi-book"
            aria-hidden="true">

            </i>

            Bootstrap Course

        </div>


        <div class="card-body">


            <h3>

                Learn Bootstrap

            </h3>


            <p>

                Master Bootstrap
                step by step.

            </p>


            <div
            class="d-flex
            gap-2
            flex-wrap">


                <button
                class="btn btn-primary">

                    <i
                    class="bi bi-play-fill"
                    aria-hidden="true">

                    </i>

                    Start Course

                </button>


                <button
                class="btn btn-outline-success">

                    <i
                    class="bi bi-check-circle"
                    aria-hidden="true">

                    </i>

                    Completed

                </button>


                <button
                class="btn btn-outline-danger"
                aria-label="Delete course">

                    <i
                    class="bi bi-trash"
                    aria-hidden="true">

                    </i>

                </button>


            </div>


        </div>


    </div>


</div>