Forem: ThemeSelection

How to Use Bootstrap Icons? - Guide with Examples 👨🏻‍💻

Ajay Patel — Thu, 18 Sep 2025 13:30:54 +0000

Icons are the unsung heroes of web design, adding visual flair and intuitive navigation to your React projects.

Whether you’re building a sleek dashboard or a vibrant e-commerce site, the right icon library can make your user interface pop while keeping things functional.

In this guide, we’ll show you how to easily integrate and use Bootstrap Icons in your web projects. Whether you're looking to add icons quickly with a CDN or customize them with CSS, this tutorial will walk you through every step.

By the end, you’ll have the skills to implement these scalable icons in your web applications to enhance user experience and improve your site’s design.

Now, let's begin:

What are Bootstrap Icons?

Bootstrap Icons is an open-source library created by the Bootstrap team. It provides a wide range of scalable vector icons that are easily customizable with CSS. Built in SVG format, these icons ensure high-quality visuals that maintain their sharpness across various screen sizes.

Key features:

1,500+ icons to choose from
Scalable, high-quality SVG visuals
Fully customizable with CSS
Works well with any web framework, not just Bootstrap

Installing Bootstrap Icons

There are two main ways to add Bootstrap Icons to your project: using a CDN or downloading the icons locally.

1. Using a CDN

The quickest and easiest way to get started with Bootstrap Icons is through a CDN. All you need to do is add the following link to your HTML <head> :

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

2. Downloading the Icons

If you'd rather host the icons yourself, you can download them and add them to your project:

Go to Bootstrap Icons
Click the "Download" button to get the .zip file
Extract the files and include them in your project directory

Then, link the downloaded CSS file in your HTML:

<link href="path/to/bootstrap-icons.css" rel="stylesheet">

3. Using Bootstrap Icons in HTML

Once Bootstrap Icons are included in your project, you can easily start using them in your HTML.

Basic Usage

To add an icon, just use the <i> tag with the appropriate class name:

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

This will display the "house door" icon.

Customizing Size and Color

You can easily customize the icon’s size, color, and more using simple CSS:

<i class="bi bi-house-door" style="font-size: 2rem; color: #007bff;"></i>

You can also control the size using predefined classes like bi-lg, bi-2x, bi-3x, etc.

<i class="bi bi-house-door bi-3x"></i>

This will make the icon three times bigger.

4. Advanced customization

You can make Bootstrap Icons even more interesting by adding hover effects or animations.

Hover Effects

Change the icon's color when the user hovers over it:

<i class="bi bi-heart" style="font-size: 2rem;" class="icon-hover"></i>

<style>
  .icon-hover:hover {
    color: red;
    cursor: pointer;
  }
</style>

Animations

Animate the icons using CSS keyframes. For example, you can make the icon rotate:

<i class="bi bi-arrow-repeat" style="font-size: 2rem;" class="icon-spin"></i>

<style>
  .icon-spin {
    animation: spin 2s linear infinite;
  }

  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
</style>

This will make the icon rotate continuously.

5. Using Icons with Bootstrap Components

Bootstrap Icons work perfectly with other Bootstrap components. Here’s how you can use them with buttons, navigation, and more.

Example with a Button:

<button class="btn btn-primary">
  <i class="bi bi-check-circle"></i> Submit
</button>

Example with Navigation:

<nav>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">
        <i class="bi bi-house-door"></i> Home
      </a>
    </li>
  </ul>
</nav>

6. Accessibility Considerations

To ensure your icons are accessible, consider adding aria-label or using the <svg> version for better screen reader support.

Example for an icon with aria-label :

<i class="bi bi-eye" aria-label="View"></i>

If you’re using the SVG version, add aria-hidden="true" :

<svg class="bi" xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
  <path d="..."></path>
</svg>

If you want more detailed information or advanced usage options, you can refer to the official Bootstrap Icons documentation.

You can also consider using Iconify for icons in your bootstrap projects. For example, you can check the Sneat Bootstrap Icons Examples which uses the iconify for the icons.

Iconify allows you to easily integrate SVG icons into your project. It simplifies the process of adding scalable vector icons without relying on multiple libraries, providing access to thousands of icons in a single package.

Sneat bootstrap template comes with feature-rich and highly customizable dashboard which can be used for any kind of projects such as CRM, eCommerce, banking apps & much more.

Why use Bootstrap icons?

Bootstrap Icons offer several advantages for web development projects:

Easy Integration:

Bootstrap Icons are simple to add to your project. Just include the CSS file, and you’re set, no complex setup required.

Scalable & High-Quality:

Built in SVG format, these icons stay sharp and clear on any screen resolution, ensuring your website looks great everywhere.

Lightweight & No Dependencies:

No extra JavaScript or complex libraries required, just pure CSS and icons, keeping your site fast and efficient.

Fully Customizable:

Easily adjust the size, color, and style of your icons with just a bit of CSS, letting you align them with your site's design.

Huge Library:

With over 1,500 icons, you’ll have everything you need for your project, whether you're building a simple webpage or a complex app.

Free & Open-Source:

Bootstrap Icons are free to use under the MIT License, so you can use them in any project without worrying about licensing fees.

Conclusion

In this guide, we've shown you how to integrate and customize Bootstrap Icons in your web projects. From CDN integration to styling with CSS, these icons offer a flexible way to enhance your UI. Whether for personal or professional projects, they’re easy to implement and fully customizable.

Now that you know how to use them, it's time to add Bootstrap Icons to your next project for a sleek, modern look. Happy coding!

🚀 How to Use FlyonUI Block with AI Tools?

Pruthvi prajapati — Wed, 30 Jul 2025 12:16:10 +0000

Welcome to this in-depth tutorial on how to build a modern, AI-assisted landing page for a BBQ restaurant using FlyonUI, Copy Prompt, and Context7 MCP — all inside a Next.js project.

⚡ Whether you're a developer looking to speed up UI creation or someone curious about integrating AI tools into your dev workflow, this guide will walk you through every step.

👨‍🏫 Introduction
🧱 What Are FlyonUI Blocks?
- 🔍 Block Categories at a Glance
- 🌮 Why Use FlyonUI Blocks?
⚙️ Starting with Different Framework and Technologies
✅ Steps:
- 1. Copy–Paste FlyonUI Blocks
- 2. Using Copy Prompt
🧠 Let’s build the BBQ Restaurant Landing Page with the Copy Prompt Feature
🛠️ How It Works
- 1. 🔥 Hero Section
- 2. 🏆 About Us Section
- 3. 🍔 Menu Section
- 4. 🛎️ Services Section
- 5. 🎊 Testimonials
- 6. 📞 Contact Us
- 7. 🖥️ Footer
How to Customise FlyonUI Blocks
- 🍀 1. Direct Code Changes
- 📌 Example: Adjusting Icon (Avatar) Size
- 🍀 2. Customizing Components with Context7 MCP
- 🔍 What is Context7 MCP?
- ⚙️ Setup Context7 MCP
- 📦 Example Use Case
✅ Conclusion
📺 Watch the Full Video

🧑‍💻 Introduction

Hey everyone! In this blog, we’ll walk you through how we built a fully responsive landing page for a BBQ restaurant using FlyonUI Blocks and some powerful AI tools.

We'll be using:

FlyonUI Blocks
The Copy Prompt feature
And the Context7 MCP server

All inside a Next.js setup — it’s super fast, clean, and easy to extend.

🧾 What Are FlyonUI Blocks?

FlyonUI Blocks are a curated collection of 500+ ready-to-use layout sections built with Tailwind CSS, covering everything from marketing headers to dashboards, ecommerce pages, data tables, and more. Each block is customizable, responsive, accessible, and supports themes and RTL layouts.

FlyonUI is an open-source Tailwind Component library offering:

80+ standalone components, like buttons, cards, modals, alerts, switchers, accordions, and advanced selects
Blocks built on top of components—500+ free and premium layout sections to compose pages quickly

🔍 Block Categories at a Glance

FlyonUI Blocks fall into five main categories:

Category	Description
Marketing UI	Hero sections, CTAs, feature highlights, testimonials
Dashboard & App UI	Layouts, widgets, modals, sidebars, charts, forms
eCommerce UI	Product cards, filters, reviews, cart, checkout flows
Data Table UI	Interactive tables, stats, filters, pagination
Bento Grid UI	Responsive grids and layout systems

Each section includes both free and pro options and is theme-ready with RTL support.

🎨 Why Use FlyonUI Blocks?

⚡ Jet‑Fast UI Composition

You can assemble entire pages by mixing and matching the Tailwind blocks—no repetitive boilerplate, just copy-paste or import.

🧩 Clean, Maintainable Code

Blocks use semantic class names built on Tailwind utilities for readable, modifiable markup that avoids class clutter.

🌈 Unlimited Theming

Support for multiple design themes (Light, Dark, Luxury, Corporate, etc.) without rewriting classes, plus full dark mode and RTL compatibility.

💡 Fully Customizable Interactivity

Includes headless JS plugins for accessible interactive components (dropdowns, accordions, overlays)—no additional frameworks needed.

🛠 Cross‑Framework Support

Works seamlessly in plain HTML or within React, Vue, Svelte, and other Tailwind-compatible environments.

⚙️ Starting with Different Frameworks and Technologies

FlyonUI provides framework integration guides for multiple frameworks. Most contain manual setup instructions and starter kits. We’ll be using the Next.js starter kit for this tutorial.

NextJs starterkit github

✅ Steps:

Clone the FlyonUI Next.js starter project
Install dependencies:
```
npm install
```
Run the development server:
```
npm run dev
```

💡 New to FlyonUI? Watch the Getting Started with FlyonUI | Beginner’s Guide ⚡️.

How to Use FlyonUI Blocks

There are multiple ways to use FlyonUI Blocks:

1. Copy-Paste FlyonUI Blocks

You can use the Copy button in the code section to grab the HTML. However, if the block contains CSS or JS, you must copy and integrate those separately into your project.

2. Using Copy Prompt

This feature lets you copy a complete code block (HTML, CSS, JS) using a structured prompt — ideal for feeding into AI tools.

🧠 Let’s build the BBQ Restaurant Landing Page with the Copy Prompt Feature

The Copy Prompt feature is a game-changer. It helps you instantly copy a structured prompt to feed into your favorite AI tool.

🛠 How It Works

Visit 👉 FlyonUI’s Tailwind CSS Blocks.

Use the pre-built prompts to generate your website sections using AI tools like VS Code, Cursor, or Windsurf.